Nuxt

From bibbleWiki
Revision as of 02:28, 19 June 2025 by Iwiseman (talk | contribs) (ESLint)
Jump to navigation Jump to search

Whirlwind Tour

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 <syntaxhighlight lang="ts"> export default defineNuxtConfig({

 modules: ['@nuxt/eslint'],
 devtools: { enabled: true },
 css: ['@picocss/pico']

.... })