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 in nuxt.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.