BMM Nuxt experiment
I wanted to try implementing the new BMM project in Nuxt instead of pure Vite, as I really enjoy the conventions of Nuxt and all the nice DX that comes out of them.
Why?
Nuxt does have a multitude of conventions and utilities to make fullstack development with Vue as easy as possible:
- File-based routing
You can also define you own route-config - Built-in composables for data fetching and caching
- Built-in composables for state management
- It handles SSR if that is relevant
You can disable SSR on a per-route basis
Devtools
The Nuxt Devtools provide a useful overview of the whole app. You can see all routes, components and composables used in the project, where they are used and so on. You can also jump directly to a component definition in VSCode by clicking on the component in the devtools.
Setup
Make sure to install the dependencies:
pnpm install
Environment variables
For Auth0 to work you need to provide a clientId
. This can be done in two ways:
- Put your id in
runtimeConfig.public.clientId
innuxt.config.ts
:
// nuxt.config.ts
export default defineConfig({
//...
runtimeConfig: {
clientId: '<YOUR_CLIENT_ID>'
},
//...
})
- Put
NUXT_PUBLIC_CLIENT_ID
in a.env
file
If you don't provide an id you won't be able to log in.
Development Server
Start the development server on http://localhost:3000
pnpm dev
Production
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.