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

Layout

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>