npx nuxi@latest init <project-name>
# or yarn, pnpm, bun
# Node 18+ required

// nuxt.config.ts

export default defineNuxtConfig({
  ssr: true, // (or false) if the page should be rendered on the server or not, for SPA, use false
  extends: [' ... '], // Nuxt Layers, feature to include other Nuxt projects, sources can be local, GitHub, npm, etc, more info at https://nuxt.com/docs/getting-started/layers
  modules: ['@nuxt/eslint'], // list of Nuxt modules, @nuxt are maintained by the team, @nuxtjs are maintained by the community, full list at https://nuxt.com/modules
  $development: { }, // or $production - env variable overrides
  devTools: { enabled: true }, // turn Nuxt DevTool on/off
  runtimeConfig: { // use with 'const runtimeConfig = useRuntimeConfig()' in the component
    apiSecret: '123',
    public: {
      apiBase: '/api'
    }
  },
  vite: {}, // by default Nuxt uses Vue as dev/build tool OR
  webpack: {},
})

// app.config.ts
export default defineAppConfig({
  title: 'My Title'
})

// runtimeConfig: Private or public tokens that need to be specified after build using environment variables.
// app.config: Public tokens that are determined at build time, website configuration such as theme variant, title and any project config that are not sensitive.

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <slot /> // where all the page content will be rendered
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: [
    function (to, from) {
      // Custom inline middleware
    },
    'auth',
  ],
})
</script>

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>