Nuxt

Whirlwind Tour

This seems to be nitro + vue + something else I will remember.

nuxt.config

Where your modules go e.g. eslint

Hello World

All starts in App.Vue

<template>
  <div>
    <div>Hello World</div>
  </div>
</template>

And to run it uses port 3000

npm run dev

ESLint

This is how he did it in nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  devtools: { enabled: true },
  compatibilityDate: '2025-05-15',
  eslint: {
    config: {
      stylistic: {
        semi: false,
        quotes: 'double',
        commaDangle: 'always-multiline',
        indent: 2,
      },
    },
  },
})

Pico CSS

He seemed to like this. I guess just another bunch on style names to remember.

npm i @picocss/pico

In the nuxt config you can say which css modules you want auto imported. So for pico you can add

export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  devtools: { enabled: true },
  css: ['@picocss/pico']
....
})

Directories

Like nextjs the nuxt also using prescribe folder structure. This include, layouts, pages, api. There are lots and can be found here

Layouts

As mentioned this is for layouts. So you can create a layouts/default.vue

<template>
  <div class="container">
    <nav>
      <ul>
        <li><strong>Acme Corp</strong></li>
      </ul>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
      </ul>
    </nav>
    <main class="container">
      <slot />
    </main>
  </div>
</template>

Pages

In the app.vue we have this which tells it to use the layouts and page

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

Make a pages folder and create an index.vue, gosh wish they had #t instead of template.

<template>
  <h1>Hello World</h1>
</template>

Components

This is for styles just kidding. If you make sub-directories the components get prefixed with the sub directory. E.g. components/app/navbar.vue will be named AppNavBar.

<template>
  <nav>
    <ul>
      <li><strong>Tasks App</strong></li>
    </ul>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>
</template>

Links

Gosh this is simple. So to do this you have two options. Name of page or route e.g.

<template>
...
    <ul>
      <li>
         <NuxtLink :to="{name: 'create'}"
      </li>
      <li>
         <NuxtLink to="/create"
      </li>
    </ul>
</template>