PNPM Minimal Nuxt 3 Typescript App with Nuxt UI & Pinia

install.sh

pnpm dlx nuxi init ./ --overwrite-dir

pnpm add @nuxt/ui @pinia/nuxt @pinia-plugin-persistedstate/nuxt @iconify/json flowbite
pnpm add -D sass @types/node 
mkdir -p assets/css layouts pages .vscode
touch assets/css/main.scss
touch layouts/default.vue
touch pages/index.vue
touch .editorconfig
touch .prettierrc.json
touch tailwind.config.ts
touch .vscode/settings.json
rm -rf app.vue

*****************************************
nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', '@nuxt/ui'],

  css: ['~/assets/css/main.scss'],
  imports: { dirs: ['stores'] },

  pinia: {},
  piniaPersistedstate: {
    storage: 'localStorage',
    debug: true,
  },

  colorMode: {
    preference: 'light',
  },
  tailwindcss: {
    viewer: false,
  },

})


*******************************************************
tailwind.config.ts

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    'docs/content/**/*.md',
    "./node_modules/flowbite/**/*.{js,ts}"
  ],
  theme: {
    extend: {
      aspectRatio: {
        auto: 'auto',
        square: '1 / 1',
        video: '16 / 9'
      }
    }
  },
  plugins: [
    require('flowbite/plugin')
  ],

}


****************************9
.vscode/settings.json

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

***************************
.prettierrc.json

{
    "tabWidth": 4,
    "useTabs": true,
    "semi": true,
    "singleQuote": true,
    "printWidth": 150,
    "bracketSpacing": true,
    "bracketSameLine": true,
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": true
}


**********************************
.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_size = 4
indent_style = tab

[**.{json,js,ts,y{a,}ml}]
indent_style = tab
indent_size = 4

[*.md]
indent_style = tab
indent_size = 4