Add nuxt example

README.md

@@ -6,6 +6,7 @@ A collection of Feature-Sliced Examples that show how you can build applications
 
 - **[examples/react-effector-todo-app](./todo-app)** <sub>[outdated]</sub>
 - **[examples/solidjs-with-layout](./examples/solidjs-with-layout)** - shows how to work with layouts
+- **[examples/nuxt](./examples/nuxt)** - shows how to work with Nuxt
 
 ## Community examples — full projects
 

examples/nuxt/.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+    root: true,
+    extends: ['@nuxt/eslint-config'],
+    rules: {
+        'vue/html-indent': ['error', 4],
+        'vue/multi-word-component-names': 'off',
+        'vue/singleline-html-element-content-newline': 'off',
+        'vue/multiline-html-element-content-newline': 'off',
+        'vue/max-attributes-per-line': 'off',
+        'vue/html-self-closing': 'off',
+        'vue/no-v-html': 'off'
+    }
+}

examples/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxt/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm run lint

examples/nuxt/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "semi": false,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "printWidth": 100,
+    "trailingComma": "none",
+    "singleAttributePerLine": true
+}

examples/nuxt/README.md

@@ -0,0 +1,13 @@
+## nuxt
+
+This example shows how to work with Nuxt.js using Feature-Sliced Design architecture. The project demonstrates routing, layouts, i18n, widgets, and pages organization. See structure in `src/` directory.
+
+### How to use
+
+Install deps and then run with npm, Yarn or pnpm to startup the example:
+
+```bash
+npm run dev
+yarn dev
+pnpm dev
+```

examples/nuxt/commitlint.config.ts

@@ -0,0 +1,3 @@
+export default {
+    extends: ['@commitlint/config-conventional']
+}

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,71 @@
+import { fileURLToPath } from 'node:url'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    devtools: { enabled: true },
+
+    alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+
+    dir: {
+        pages: './routes',
+        layouts: './layouts'
+    },
+
+    srcDir: './src/app',
+
+    app: {
+        head: {
+            link: [
+                {
+                    rel: 'icon',
+                    href: '/favicon.ico',
+                    sizes: 'any'
+                }
+            ],
+            meta: [
+                {
+                    name: 'keywords',
+                    content:
+                        'Frontend Developer, TypeScript Developer, JavaScript Developer, Vue.js Developer, Nuxt.js Developer, SolidJS Developer, Web Development, SPA Development, Modern Frontend, Responsive Web Apps'
+                }
+            ]
+        }
+    },
+
+    imports: {
+        scan: false
+    },
+
+    css: ['@/shared/assets/scss/main.scss'],
+
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: `
+                      @use '@/shared/assets/scss/fonts.scss' as *;
+                      @use '@/shared/assets/scss/variables.scss' as *;
+                      @use '@/shared/assets/scss/screens.scss' as *;
+                  `
+                }
+            }
+        }
+    },
+
+    modules: ['@vueuse/nuxt', '@nuxtjs/i18n'],
+
+    i18n: {
+        strategy: 'no_prefix',
+        compilation: {
+            strictMessage: false
+        },
+        restructureDir: 'src/app/i18n',
+        locales: [
+            { code: 'en', name: 'English', language: 'en-US', file: 'en.json' },
+            { code: 'be', name: 'Беларуская', language: 'be-BY', file: 'be.json' }
+        ],
+        defaultLocale: 'en'
+    }
+})

examples/nuxt/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "nuxt",
+    "private": true,
+    "license": "MIT",
+    "type": "module",
+    "author": {
+        "name": "Dzmitry Muzychenka"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
+        "prepare": "husky"
+    },
+    "devDependencies": {
+        "@nuxt/devtools": "latest",
+        "@nuxt/eslint-config": "^0.2.0",
+        "@nuxtjs/eslint-module": "^4.1.0",
+        "@nuxtjs/i18n": "^10.1.0",
+        "@vueuse/core": "^10.7.0",
+        "@vueuse/nuxt": "^10.7.0",
+        "eslint": "^8.56.0",
+        "husky": "^9.1.7"
+    },
+    "dependencies": {
+        "nuxt": "^4.1.3",
+        "sass": "^1.69.5",
+        "vite-svg-loader": "^5.1.0",
+        "vue": "^3.3.12",
+        "vue-router": "^4.2.5",
+        "zod": "^3.22.4"
+    }
+}