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 documentation, which covers Nuxt v3, and not which covers Nuxt v2.

πŸš€ You can find modules at

πŸ”₯ You can get started at


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";


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.

    <AppHeader />
    <slot />
    <AppFooter />

A page can use a layout as follows:

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


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, will be 1
// When accessing /posts?page=1, will be 1


As per the documentation, you can

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

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

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' }]

πŸ‘» To-do πŸ‘»

Stuff that I found, but never read/used yet.

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