NuxtWind Linted stack

Init nuxt app

WEBSITE_NAME="website"
npx nuxi@latest init $WEBSITE_NAME
cd $WEBSITE_NAME

Change name in package.json to match WEBSITE_NAME

npm i -D sass
mkdir -p assets/{scss,sass}

Init VSCode settings

mkdir -p .vscode
cat > .vscode/settings.json << EOF
{
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.rulers": [
        100
    ],
    "svg.preview.background": "transparent"
}
EOF

Init eslint config

npm i -D eslint prettier eslint-config-prettier @nuxtjs/eslint-module @nuxt/eslint-config
cat > .eslintrc.cjs << EOF
module.exports = {
  root: true,
  extends: ["@nuxt/eslint-config", "prettier"],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}
EOF

Init prettier config

npm i -D stylelint-prettier prettier
cat > .prettierrc.json << EOF
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}
EOF

Init stylelint config

npm i -D stylelint-config-tailwindcss stylelint-config-standard-scss stylelint-config-standard stylelint
cat > .stylelintrc.json << EOF
{
    "plugins": ["stylelint-prettier"],
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-standard-scss",
        "stylelint-config-tailwindcss/scss"
    ]
}
EOF

Init Tailwindcss config

npm i -D @nuxtjs/tailwindcss
cat > tailwind.config.js << EOF
/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    // require('@tailwindcss/forms'),
    // require('flowbite/plugin'),
  ],
  // darkMode: 'class',
}
EOF

SVG Sprite Module

npm i -D @nuxtjs/svg-sprite
mkdir -p assets/sprite/svg

Update nuxt modules

npm i -D @nuxtjs/tailwindcss

  modules: [
      '@nuxtjs/svg-sprite',
      '@nuxtjs/tailwindcss',
      '@nuxtjs/eslint-module',
  ],