Nuxt.js ¶

Nuxt.js is a front-end framework based on Vue.js. To build websites on Windows, you need Visual Studio Build tools:

• MSVC v143 - VS 2022 C++ (at least)
• Windows 11 SDK
• C++ Cmake tools for Windows

You can use npx nuxi init -t v3 <project_name> to create a new project. Use npm install, then use npm run dev to run the website.

⚠️ Be sure to read nuxt.com documentation, which covers Nuxt v3, and not nuxtjs.org which covers Nuxt v2.

🚀 You can find modules at nuxt.com/modules.

🔥 You can get started at nuxt.new.

All ".vue" files for a component are stored in components. They are automatically imported inside other ".vue" files.

We are now able to write script in another language:

<script setup lang="ts">
// explicit import a component
import HelloWorld from "~/components/HelloWorld.vue";
</script>

Each page will use a layout. Multiple pages can use the same layout, but inject some specific components into it.

👉 The default layout used is ./layouts/default.vue.

For instance, we could define a layout in which those using it will share the same header (AppHeader) and footer (AppFooter), but they will have to provide the main div.

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

A page can use a layout as follows:

<NuxtLayout>
    <!-- this is the content injected in <slot /> -->
</NuxtLayout>

Refer to the Routing documentation.

💡 Images and public content should be put in "public". Given an image at ./public/xxx.png, you should use /xxx.png in the code.

You can access query/params using:

<script setup>
const route = useRoute()
// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
// When accessing /posts?page=1, route.query.page will be 1
console.log(route.query.page)
</script>

As per the documentation, you can

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ]
})
</script>

To set the config for all pages, edit /nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['bootstrap/dist/css/bootstrap.min.css'],
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My App',
      meta: [
        { name: 'description', content: 'My amazing site.' }
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }]
    }
  }
})

• nitro

// can only access the localStorage from a client
// but, don't use this
if (process.client) {
  const storage = localStorage.getItem('x')
}