├── .gitattributes
├── src
    ├── assets
    │   ├── main.css
    │   ├── logo.svg
    │   └── base.css
    ├── main.ts
    ├── components
    │   ├── icons
    │   │   ├── IconSupport.vue
    │   │   ├── IconTooling.vue
    │   │   ├── IconCommunity.vue
    │   │   ├── IconDocumentation.vue
    │   │   └── IconEcosystem.vue
    │   └── __tests__
    │   │   └── HelloWorld.spec.ts
    └── App.vue
├── env.d.ts
├── public
    └── favicon.ico
├── postcss.config.js
├── .prettierrc.json
├── tailwind.config.js
├── .vscode
    └── extensions.json
├── .editorconfig
├── tsconfig.json
├── tsconfig.vitest.json
├── tsconfig.app.json
├── index.html
├── vitest.config.ts
├── .gitignore
├── vite.config.ts
├── tsconfig.node.json
├── eslint.config.ts
├── README.md
├── package.json
└── AGENTS.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/fusion-vue-tailwind-starter/main/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './assets/main.css'
2 | 
3 | import { createApp } from 'vue'
4 | import App from './App.vue'
5 | 
6 | createApp(App).mount('#app')
7 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "singleQuote": true,
5 |   "printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "Vue.volar",
 4 |     "vitest.explorer",
 5 |     "dbaeumer.vscode-eslint",
 6 |     "EditorConfig.EditorConfig",
 7 |     "esbenp.prettier-vscode"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
 2 | charset = utf-8
 3 | indent_size = 2
 4 | indent_style = space
 5 | insert_final_newline = true
 6 | trim_trailing_whitespace = true
 7 | 
 8 | end_of_line = lf
 9 | max_line_length = 100
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     },
10 |     {
11 |       "path": "./tsconfig.vitest.json"
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.app.json",
 3 |   "include": ["src/**/__tests__/*", "env.d.ts"],
 4 |   "exclude": [],
 5 |   "compilerOptions": {
 6 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
 7 | 
 8 |     "lib": [],
 9 |     "types": ["node", "jsdom"]
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/icons/IconSupport.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 7 | 
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/__tests__/HelloWorld.spec.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | 
 3 | import { mount } from '@vue/test-utils'
 4 | import HelloWorld from '../HelloWorld.vue'
 5 | 
 6 | describe('HelloWorld', () => {
 7 |   it('renders properly', () => {
 8 |     const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
 9 |     expect(wrapper.text()).toContain('Hello Vitest')
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from 'node:url'
 2 | import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
 3 | import viteConfig from './vite.config'
 4 | 
 5 | export default mergeConfig(
 6 |   viteConfig,
 7 |   defineConfig({
 8 |     test: {
 9 |       environment: 'jsdom',
10 |       exclude: [...configDefaults.exclude, 'e2e/**'],
11 |       root: fileURLToPath(new URL('./', import.meta.url)),
12 |     },
13 |   }),
14 | )
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 
30 | *.tsbuildinfo
31 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueDevTools from 'vite-plugin-vue-devtools'
 6 | 
 7 | // https://vite.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [
10 |     vue(),
11 |     vueDevTools(),
12 |   ],
13 |   resolve: {
14 |     alias: {
15 |       '@': fileURLToPath(new URL('./src', import.meta.url))
16 |     },
17 |   },
18 | })
19 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node22/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*",
 9 |     "eslint.config.*"
10 |   ],
11 |   "compilerOptions": {
12 |     "noEmit": true,
13 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
14 | 
15 |     "module": "ESNext",
16 |     "moduleResolution": "Bundler",
17 |     "types": ["node"]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
 1 | <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 2 | <template>
 3 |   <svg
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 6 |     aria-hidden="true"
 7 |     role="img"
 8 |     class="iconify iconify--mdi"
 9 |     width="24"
10 |     height="24"
11 |     preserveAspectRatio="xMidYMid meet"
12 |     viewBox="0 0 24 24"
13 |   >
14 |     <path
15 |       d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
16 |       fill="currentColor"
17 |     ></path>
18 |   </svg>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/eslint.config.ts:
--------------------------------------------------------------------------------
 1 | import { globalIgnores } from 'eslint/config'
 2 | import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 3 | import pluginVue from 'eslint-plugin-vue'
 4 | import pluginVitest from '@vitest/eslint-plugin'
 5 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 6 | 
 7 | // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 8 | // import { configureVueProject } from '@vue/eslint-config-typescript'
 9 | // configureVueProject({ scriptLangs: ['ts', 'tsx'] })
10 | // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
11 | 
12 | export default defineConfigWithVueTs(
13 |   {
14 |     name: 'app/files-to-lint',
15 |     files: ['**/*.{ts,mts,tsx,vue}'],
16 |   },
17 | 
18 |   globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
19 | 
20 |   pluginVue.configs['flat/essential'],
21 |   vueTsConfigs.recommended,
22 |   
23 |   {
24 |     ...pluginVitest.configs.recommended,
25 |     files: ['src/**/__tests__/*'],
26 |   },
27 |   skipFormatting,
28 | )
29 | 


--------------------------------------------------------------------------------
/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <div
 5 |     class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200"
 6 |   >
 7 |     <div class="text-center">
 8 |       <!-- TODO: replace everything here with the actual app! -->
 9 |       <h1 class="text-2xl font-semibold text-slate-800 flex items-center justify-center gap-3">
10 |         <svg class="animate-spin h-8 w-8 text-slate-400" viewBox="0 0 50 50">
11 |           <circle
12 |             class="opacity-30"
13 |             cx="25"
14 |             cy="25"
15 |             r="20"
16 |             stroke="currentColor"
17 |             stroke-width="5"
18 |             fill="none"
19 |           />
20 |           <circle
21 |             class="text-slate-600"
22 |             cx="25"
23 |             cy="25"
24 |             r="20"
25 |             stroke="currentColor"
26 |             stroke-width="5"
27 |             fill="none"
28 |             stroke-dasharray="100"
29 |             stroke-dashoffset="75"
30 |           />
31 |         </svg>
32 |         Generating your app...
33 |       </h1>
34 |     </div>
35 |   </div>
36 | </template>
37 | 
38 | <style scoped></style>
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fusion-vue-tailwind-starter
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 8 | 
 9 | ## Type Support for `.vue` Imports in TS
10 | 
11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
12 | 
13 | ## Customize configuration
14 | 
15 | See [Vite Configuration Reference](https://vite.dev/config/).
16 | 
17 | ## Project Setup
18 | 
19 | ```sh
20 | npm install
21 | ```
22 | 
23 | ### Compile and Hot-Reload for Development
24 | 
25 | ```sh
26 | npm run dev
27 | ```
28 | 
29 | ### Type-Check, Compile and Minify for Production
30 | 
31 | ```sh
32 | npm run build
33 | ```
34 | 
35 | ### Run Unit Tests with [Vitest](https://vitest.dev/)
36 | 
37 | ```sh
38 | npm run test:unit
39 | ```
40 | 
41 | ### Lint with [ESLint](https://eslint.org/)
42 | 
43 | ```sh
44 | npm run lint
45 | ```
46 | 


--------------------------------------------------------------------------------
/src/components/icons/IconDocumentation.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
3 |     <path
4 |       d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fusion-vue-tailwind-starter",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "run-p type-check \"build-only {@}\" --",
 9 |     "preview": "vite preview",
10 |     "test:unit": "vitest",
11 |     "build-only": "vite build",
12 |     "type-check": "vue-tsc --build",
13 |     "lint": "eslint . --fix",
14 |     "format": "prettier --write src/"
15 |   },
16 |   "dependencies": {
17 |     "vue": "^3.5.17"
18 |   },
19 |   "devDependencies": {
20 | 
21 |     "@tsconfig/node22": "^22.0.2",
22 |     "@types/jsdom": "^21.1.7",
23 |     "@types/node": "^22.15.32",
24 |     "@vitejs/plugin-vue": "^6.0.0",
25 |     "@vitest/eslint-plugin": "^1.2.7",
26 |     "@vue/eslint-config-prettier": "^10.2.0",
27 |     "@vue/eslint-config-typescript": "^14.5.1",
28 |     "@vue/test-utils": "^2.4.6",
29 |     "@vue/tsconfig": "^0.7.0",
30 |     "autoprefixer": "^10.4.21",
31 |     "eslint": "^9.29.0",
32 |     "eslint-plugin-vue": "~10.2.0",
33 |     "jiti": "^2.4.2",
34 |     "jsdom": "^26.1.0",
35 |     "npm-run-all2": "^8.0.4",
36 |     "postcss": "^8.5.6",
37 |     "prettier": "3.5.3",
38 |     "tailwindcss": "^3.4.11",
39 |     "typescript": "~5.8.0",
40 |     "vite": "^7.0.0",
41 |     "vite-plugin-vue-devtools": "^7.7.7",
42 |     "vitest": "^3.2.4",
43 |     "vue-tsc": "^2.2.10"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
3 |     <path
4 |       d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* color palette from <https://github.com/vuejs/theme> */
 6 | :root {
 7 |   --vt-c-white: #ffffff;
 8 |   --vt-c-white-soft: #f8f8f8;
 9 |   --vt-c-white-mute: #f2f2f2;
10 | 
11 |   --vt-c-black: #181818;
12 |   --vt-c-black-soft: #222222;
13 |   --vt-c-black-mute: #282828;
14 | 
15 |   --vt-c-indigo: #2c3e50;
16 | 
17 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
18 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
19 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
20 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
21 | 
22 |   --vt-c-text-light-1: var(--vt-c-indigo);
23 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
24 |   --vt-c-text-dark-1: var(--vt-c-white);
25 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
26 | }
27 | 
28 | /* semantic color variables for this project */
29 | :root {
30 |   --color-background: var(--vt-c-white);
31 |   --color-background-soft: var(--vt-c-white-soft);
32 |   --color-background-mute: var(--vt-c-white-mute);
33 | 
34 |   --color-border: var(--vt-c-divider-light-2);
35 |   --color-border-hover: var(--vt-c-divider-light-1);
36 | 
37 |   --color-heading: var(--vt-c-text-light-1);
38 |   --color-text: var(--vt-c-text-light-1);
39 | 
40 |   --section-gap: 160px;
41 | }
42 | 
43 | @media (prefers-color-scheme: dark) {
44 |   :root {
45 |     --color-background: var(--vt-c-black);
46 |     --color-background-soft: var(--vt-c-black-soft);
47 |     --color-background-mute: var(--vt-c-black-mute);
48 | 
49 |     --color-border: var(--vt-c-divider-dark-2);
50 |     --color-border-hover: var(--vt-c-divider-dark-1);
51 | 
52 |     --color-heading: var(--vt-c-text-dark-1);
53 |     --color-text: var(--vt-c-text-dark-2);
54 |   }
55 | }
56 | 
57 | *,
58 | *::before,
59 | *::after {
60 |   box-sizing: border-box;
61 |   margin: 0;
62 |   font-weight: normal;
63 | }
64 | 
65 | body {
66 |   min-height: 100vh;
67 |   color: var(--color-text);
68 |   background: var(--color-background);
69 |   transition:
70 |     color 0.5s,
71 |     background-color 0.5s;
72 |   line-height: 1.6;
73 |   font-family:
74 |     Inter,
75 |     -apple-system,
76 |     BlinkMacSystemFont,
77 |     'Segoe UI',
78 |     Roboto,
79 |     Oxygen,
80 |     Ubuntu,
81 |     Cantarell,
82 |     'Fira Sans',
83 |     'Droid Sans',
84 |     'Helvetica Neue',
85 |     sans-serif;
86 |   font-size: 15px;
87 |   text-rendering: optimizeLegibility;
88 |   -webkit-font-smoothing: antialiased;
89 |   -moz-osx-font-smoothing: grayscale;
90 | }
91 | 


--------------------------------------------------------------------------------
/AGENTS.md:
--------------------------------------------------------------------------------
  1 | # Fusion Vue Tailwind Starter
  2 | 
  3 | A production-ready Vue.js application template with TypeScript, TailwindCSS 3, and modern tooling.
  4 | 
  5 | ## Tech Stack
  6 | 
  7 | - **Frontend**: Vue 3.5.17 + TypeScript + TailwindCSS 3.4.11
  8 | - **Styling**: TailwindCSS 3 with PostCSS + Autoprefixer
  9 | - **Testing**: Vitest with Vue Test Utils for component testing
 10 | - **Build Tool**: Vite 7 with Vue plugin
 11 | - **Package Manager**: npm
 12 | - **Linting**: ESLint 9 + Prettier
 13 | - **Type Checking**: TypeScript 5 + vue-tsc
 14 | - **Development Tools**: Vue DevTools integration
 15 | 
 16 | ## Project Structure
 17 | 
 18 | ```
 19 | src/                     # Vue application source
 20 | ├── App.vue             # Main app component
 21 | ├── main.ts             # Application entry point
 22 | ├── assets/             # Static assets
 23 | │   ├── base.css        # Base styles
 24 | │   ├── logo.svg        # Logo asset
 25 | │   └── main.css        # Main styles with TailwindCSS imports
 26 | ├── components/         # Vue components
 27 | │   ├── __tests__/      # Component tests
 28 | │   └── icons/          # Icon components
 29 | ├── env.d.ts            # TypeScript declarations
 30 | └── ...                 # Other source files
 31 | 
 32 | public/                 # Static assets
 33 | ├── favicon.ico         # Site favicon
 34 | └── ...                 # Other static files
 35 | ```
 36 | 
 37 | ## Key Features
 38 | 
 39 | ### Vue 3 Composition API
 40 | 
 41 | The application uses Vue 3's modern Composition API with TypeScript:
 42 | 
 43 | - `<script setup>` syntax for concise component logic
 44 | - TypeScript integration throughout
 45 | - Reactive state management with Vue's reactivity system
 46 | - Component-based architecture
 47 | 
 48 | ### Styling System
 49 | 
 50 | - **Primary**: TailwindCSS 3.4.11 utility classes
 51 | - **PostCSS**: Autoprefixer for cross-browser compatibility
 52 | - **Configuration**: `tailwind.config.js` for custom theming
 53 | 
 54 | ```vue
 55 | <!-- Example of TailwindCSS usage in Vue components -->
 56 | <template>
 57 |   <div
 58 |     class="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200"
 59 |   >
 60 |     <div class="text-center">
 61 |       <h1 class="text-2xl font-semibold text-slate-800">Welcome to Fusion</h1>
 62 |     </div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script setup lang="ts">
 67 | // Component logic here
 68 | </script>
 69 | ```
 70 | 
 71 | ### Development Commands
 72 | 
 73 | ```bash
 74 | npm run dev          # Start development server
 75 | npm run build        # Production build
 76 | npm run preview      # Preview production build
 77 | npm run type-check   # Type check with vue-tsc
 78 | npm run test:unit    # Run tests with Vitest
 79 | npm run lint         # Lint with ESLint
 80 | npm run format       # Format with Prettier
 81 | ```
 82 | 
 83 | ## Adding Features
 84 | 
 85 | ### New Components
 86 | 
 87 | 1. Create component in `src/components/`:
 88 | 
 89 | ```vue
 90 | <!-- src/components/MyComponent.vue -->
 91 | <template>
 92 |   <div class="rounded-lg bg-white p-4 shadow">
 93 |     <h2 class="text-xl font-bold text-gray-900">{{ title }}</h2>
 94 |     <p class="text-gray-600">{{ description }}</p>
 95 |   </div>
 96 | </template>
 97 | 
 98 | <script setup lang="ts">
 99 | interface Props {
100 |   title?: string
101 |   description?: string
102 | }
103 | 
104 | withDefaults(defineProps<Props>(), {
105 |   title: 'Default Title',
106 |   description: 'Default description',
107 | })
108 | </script>
109 | ```
110 | 
111 | 2. Import in your app:
112 | 
113 | ```vue
114 | <template>
115 |   <MyComponent title="Custom Title" description="Custom description" />
116 | </template>
117 | 
118 | <script setup lang="ts">
119 | import MyComponent from '@/components/MyComponent.vue'
120 | </script>
121 | ```
122 | 
123 | ### Custom TailwindCSS Configuration
124 | 
125 | 1. Update `tailwind.config.js` for custom theming:
126 | 
127 | ```javascript
128 | /** @type {import('tailwindcss').Config} */
129 | export default {
130 |   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
131 |   theme: {
132 |     extend: {
133 |       colors: {
134 |         primary: '#3b82f6',
135 |         secondary: '#64748b',
136 |       },
137 |     },
138 |   },
139 |   plugins: [],
140 | }
141 | ```
142 | 
143 | 2. Add custom styles in `src/assets/main.css`:
144 | 
145 | ```css
146 | @tailwind base;
147 | @tailwind components;
148 | @tailwind utilities;
149 | 
150 | @layer components {
151 |   .btn-primary {
152 |     @apply rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700;
153 |   }
154 | }
155 | ```
156 | 
157 | ## Testing
158 | 
159 | The project includes comprehensive testing setup:
160 | 
161 | - **Unit Testing**: Vitest for fast unit tests
162 | - **Component Testing**: Vue Test Utils for Vue component testing
163 | - **Type Checking**: vue-tsc for TypeScript validation
164 | 
165 | ```bash
166 | npm run test:unit    # Run unit tests
167 | ```
168 | 
169 | ## Production Deployment
170 | 
171 | - **Development**: `npm run dev` for local development
172 | - **Build**: `npm run build` creates optimized production build
173 | - **Preview**: `npm run preview` to preview production build
174 | - **Type Check**: `npm run type-check` for TypeScript validation
175 | 
176 | ## Architecture Notes
177 | 
178 | - Vue 3.5.17 with Composition API for modern reactive components
179 | - TypeScript throughout the application
180 | - TailwindCSS 3.4.11 for utility-first styling
181 | - Vite 7 for fast development and optimized builds
182 | - Vitest + Vue Test Utils for comprehensive testing
183 | - ESLint + Prettier for code quality
184 | - Vue DevTools integration for development debugging
185 | - Single-page application (SPA) architecture
186 | 


--------------------------------------------------------------------------------