create-vuetify 1.1.1 → 2.0.0

package/template/javascript/essentials/package.json

@@ -1,28 +1,6 @@
 {
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --fix --ignore-path .gitignore"
-  },
-  "dependencies": {
-    "@mdi/font": "7.0.96",
-    "core-js": "^3.29.0",
-    "pinia": "^2.0.0",
-    "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0"
-  },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "eslint": "^8.37.0",
-    "eslint-plugin-vue": "^9.3.0",
-    "sass": "^1.60.0",
-    "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "unplugin-fonts": "^1.0.3"
+    "pinia" : "^2.1.0",
+    "vite-plugin-vue-layouts": "^0.10.0"
   }
 }

package/template/javascript/essentials/src/layouts/README.md

@@ -0,0 +1,5 @@
+# Layouts
+
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) repository.

package/template/javascript/essentials/src/layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-app>
+    <DefaultBar />
+
+    <DefaultView />
+  </v-app>
+</template>
+
+<script setup>
+  import DefaultBar from './default/AppBar.vue'
+  import DefaultView from './default/View.vue'
+</script>

package/template/javascript/essentials/src/plugins/index.js

@@ -6,8 +6,8 @@
 
 // Plugins
 import vuetify from './vuetify'
-import pinia from '../store'
-import router from '../router'
+import pinia from '@/store'
+import router from '@/router'
 
 export function registerPlugins (app) {
   app

package/template/javascript/essentials/src/router/index.js

@@ -1,26 +1,14 @@
-// Composables
-import { createRouter, createWebHistory } from 'vue-router'
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
 
-const routes = [
-  {
-    path: '/',
-    component: () => import('@/layouts/default/Default.vue'),
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (Home-[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import('@/views/Home.vue'),
-      },
-    ],
-  },
-]
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
 })
 
 export default router

package/template/javascript/essentials/src/store/README.md

@@ -0,0 +1,5 @@
+# Store
+
+Pinia stores are used to store reactive state and expose actions to mutate it.
+
+Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.

package/template/javascript/{base/vite.config.js → essentials/vite.config.mjs}

@@ -1,7 +1,10 @@
 // Plugins
-import vue from '@vitejs/plugin-vue'
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import ViteFonts from 'unplugin-fonts/vite'
+import Layouts from 'vite-plugin-vue-layouts'
+import VueRouter from 'unplugin-vue-router/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -10,16 +13,19 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
+    VueRouter(),
+    Layouts(),
+    Vue({
       template: { transformAssetUrls }
     }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    vuetify({
+    Vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    Components(),
     ViteFonts({
       google: {
         families: [{

package/template/typescript/base/_eslintrc.js

@@ -1,3 +1,9 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
 module.exports = {
   root: true,
   env: {

package/template/typescript/base/package.json

@@ -1,32 +1,20 @@
 {
-  "version": "0.0.0",
-  "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview",
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@mdi/font": "7.0.96",
-    "core-js": "^3.29.0",
-    "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0"
+    "core-js": "^3.34.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
-    "@types/node": "^18.15.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0",
-    "sass": "^1.60.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0",
-    "unplugin-fonts": "^1.0.3"
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.4.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.19.0",
+    "vue-router": "^4.2.0",
+    "unplugin-vue-router": "^0.7.0"
   }
 }

package/template/typescript/base/src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <router-view />
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
 </template>
 
 <script lang="ts" setup>

package/template/typescript/base/src/pages/README.md

@@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigatable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.

package/template/typescript/{essentials/src/App.vue → base/src/pages/index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <router-view />
+  <HelloWorld />
 </template>
 
 <script lang="ts" setup>

package/template/typescript/base/src/router/index.ts

@@ -1,26 +1,14 @@
-// Composables
-import { createRouter, createWebHistory } from 'vue-router'
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
 
-const routes = [
-  {
-    path: '/',
-    component: () => import('@/layouts/default/Default.vue'),
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (Home-[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import('@/views/Home.vue'),
-      },
-    ],
-  },
-]
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
 })
 
 export default router

package/template/typescript/base/src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

package/template/typescript/base/{vite.config.ts → vite.config.mts}

@@ -1,7 +1,9 @@
 // Plugins
-import vue from '@vitejs/plugin-vue'
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import ViteFonts from 'unplugin-fonts/vite'
+import VueRouter from 'unplugin-vue-router/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -10,24 +12,24 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
+    VueRouter(),
+    Vue({
       template: { transformAssetUrls },
     }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    vuetify({
+    Vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    Components(),
     ViteFonts({
       google: {
-        families: [
-          {
-            name: 'Roboto',
-            styles: 'wght@100;300;400;500;700;900',
-          },
-        ],
+        families: [ {
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
       },
     }),
   ],
@@ -36,7 +38,15 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
   },
   server: {
     port: 3000,

package/template/typescript/default/README.md

@@ -1,53 +1,79 @@
-# default
+# Vuetify (Default)
 
-## Project setup
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
 
-```
-# yarn
-yarn
+## ❗️ Important Links
 
-# npm
-npm install
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
 
-# pnpm
-pnpm install
+## 💿 Install
 
-# bun
-bun install
-```
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
 
-### Compiles and hot-reloads for development
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
 
-```
-# yarn
-yarn dev
+After completing the installation, your environment is ready for Vuetify development.
 
-# npm
-npm run dev
+## ✨ Features
 
-# pnpm
-pnpm dev
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
 
-# bun
-bun run dev
-```
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
 
-### Compiles and minifies for production
+## 💡 Usage
 
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
 ```
-# yarn
-yarn build
 
-# npm
-npm run build
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+### Building for Production
 
-# pnpm
-pnpm build
+To build your project for production, use:
 
-# bun
-bun run build
+```bash
+yarn build
 ```
 
-### Customize configuration
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
 
-See [Configuration Reference](https://vitejs.dev/config/).
+Copyright (c) 2016-present Vuetify, LLC

package/template/typescript/default/_gitignore

@@ -2,7 +2,6 @@
 node_modules
 /dist
 
-
 # local env files
 .env.local
 .env.*.local

package/template/typescript/default/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vuetify 3</title>
+    <title>Welcome to Vuetify 3</title>
 </head>
 
 <body>

package/template/typescript/default/package.json

@@ -1,24 +1,26 @@
 {
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "node --no-warnings ./node_modules/.bin/vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
-    "vue": "^3.2.0",
+    "vue": "^3.3.0",
     "vuetify": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
-    "@types/node": "^18.15.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.2.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0",
-    "unplugin-fonts": "^1.0.3"
+    "@babel/types": "^7.23.0",
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "sass": "^1.69.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-vuetify": "^2.0.0",
+    "vue-tsc": "^1.8.0",
+    "unplugin-vue-components": "^0.26.0",
+    "unplugin-fonts": "^1.1.0"
   }
 }

package/template/typescript/default/src/App.vue

@@ -7,5 +7,5 @@
 </template>
 
 <script setup lang="ts">
-  import HelloWorld from '@/components/HelloWorld.vue'
+  //
 </script>

package/template/typescript/default/src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

package/template/typescript/default/src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

package/template/typescript/default/src/plugins/vuetify.ts

@@ -13,14 +13,5 @@ import { createVuetify } from 'vuetify'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  theme: {
-    themes: {
-      light: {
-        colors: {
-          primary: '#1867C0',
-          secondary: '#5CBBF6',
-        },
-      },
-    },
-  },
+  //
 })

package/template/typescript/default/tsconfig.node.json

@@ -5,5 +5,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.mts"]
 }

package/template/typescript/default/{vite.config.ts → vite.config.mts}

@@ -1,6 +1,7 @@
 // Plugins
-import vue from '@vitejs/plugin-vue'
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
@@ -10,21 +11,18 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
+    Vue({
       template: { transformAssetUrls },
     }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    vuetify({
-      autoImport: true,
-    }),
+    Vuetify(),
+    Components(),
     ViteFonts({
       google: {
-        families: [
-          {
-            name: 'Roboto',
-            styles: 'wght@100;300;400;500;700;900',
-          },
-        ],
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
       },
     }),
   ],
@@ -33,7 +31,15 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
   },
   server: {
     port: 3000,