create-vuetify 1.1.0 → 2.0.0

package/README.md

@@ -1,40 +1,77 @@
 # create-vuetify
 
-## Flags
-
-`create-vuetify` provides flags that can be passed when using the CLI to generate a new project.
-
-| **Flags**    | **Values**                                | **Example**                              |
-| :----------- | ----------------------------------------- | ---------------------------------------- |
-| `preset`     | `default`, `base`, `essentials`, `custom` | `--preset="default" or --preset default` |
-| `typescript` | `boolean`                                 | `--typescript`                           |
-
-## 💪 Supporting Vuetify
-
-<p>Vuetify is an open source MIT project that has been made possible due to the generous contributions by <a href="https://github.com/vuetifyjs/vuetify/blob/dev/BACKERS.md">community backers</a>. If you are interested in supporting this project, please consider:</p>
-
-<ul>
-  <li>
-    <a href="https://github.com/users/johnleider/sponsorship">Becoming a sponsor on Github</a>
-    <strong><small>(supports John)</small></strong>
-  </li>
-  <li>
-    <a href="https://opencollective.com/vuetify">Becoming a backer on OpenCollective</a>
-    <strong><small>(supports the Dev team)</small></strong>
-  </li>
-  <li>
-    <a href="https://tidelift.com/subscription/npm/vuetify?utm_source=vuetify&utm_medium=referral&utm_campaign=readme">Become a subscriber on Tidelift</a>
-  </li>
-  <li>
-    <a href="https://paypal.me/vuetify">Make a one-time payment with Paypal</a>
-  </li>
-  <li>
-    <a href="https://vuetifyjs.com/getting-started/consulting-and-support?ref=github">Book time with the Team</a>
-  </li>
-</ul>
-
-### 📑 License
-
-[MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2016-present Vuetify, LLC
+<p align="center">
+  <img src="https://cdn.vuetifyjs.com/docs/images/logos/v.png" height="128">
+</p>
+
+## Getting Started
+
+Using your terminal, navigate to your sites directory and run the following command:
+
+**Using Yarn:**
+```bash
+yarn create vuetify
+```
+
+**Using NPM:**
+```bash
+npm create vuetify
+```
+
+**Using PNPM:**
+```bash
+pnpm create vuetify
+```
+
+**Using Bun:**
+```bash
+bun create vuetify
+```
+
+## Vuetify
+
+Vuetify is an Open Source UI Library that is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
+
+The documentation for **Vuetify** is hosted [here](https://vuetifyjs.com/).
+
+### Support Development
+
+Vuetify is an open source MIT 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)
+
+## Vite
+
+Vite is a build tool that significantly improves the front-end development experience. You can use Vite to set up a development environment for frameworks like Vue and React, and even for a vanilla JavaScript app with a dev server and hot reloading in just three commands. It also easily integrates with [TypeScript](https://vitejs.dev/guide/features.html#typescript).
+
+## Browser Support
+
+| Browser | Status |
+| - | - |
+| Chromium (Chrome, Edge) | ✅ Supported * |
+| Firefox | ✅ Supported * |
+| Safari 15.4+ | ✅ Supported |
+| Safari 13. | ❗ Requires polyfill |
+| Edge <79 | ⛔ Not supported |
+| Internet Explorer | ⛔ Not supported |
+
+## Resources
+
+- 📄 [Documentation](https://vuetifyjs.com/)
+- 🚨 [Report an Issue](https://issues.vuetifyjs.com/)
+- 🏬 [Vuetify Store](https://store.vuetifyjs.com/)
+- 🎮 [Vuetify Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## Licensing
+
+- Copyright 2023 Vuetify <https://vuetifyjs.com/>
+- Vuetify [License Information](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md)
+
+<br>

package/dist/output.cjs

@@ -14,10 +14,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 
 // src/index.ts
 var import_path3 = require("path");
@@ -78,12 +75,11 @@ var promptQuestions = (context) => [
     name: "usePreset",
     type: context.usePreset ? null : "select",
     message: "Which preset would you like to install?",
-    initial: 1,
+    initial: 0,
     choices: [
       { title: "Default (Vuetify)", value: "default" },
-      { title: "Base (Vuetify, VueRouter)", value: "base" },
-      { title: "Essentials (Vuetify, VueRouter, Pinia)", value: "essentials" },
-      { title: "Custom (Choose your features)", value: "custom" }
+      { title: "Base (Default, Routing)", value: "base" },
+      { title: "Essentials (Base, Layouts, Pinia)", value: "essentials" }
     ]
   },
   {
@@ -94,30 +90,6 @@ var promptQuestions = (context) => [
     inactive: "No",
     initial: false
   },
-  {
-    name: "useRouter",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use Vue Router?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "useStore",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use Pinia?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
-  {
-    name: "useEslint",
-    type: (_, { usePreset }) => usePreset !== "custom" && context.usePreset !== "custom" ? null : "toggle",
-    message: "Use ESLint?",
-    active: "Yes",
-    inactive: "No",
-    initial: false
-  },
   {
     name: "usePackageManager",
     type: "select",
@@ -253,10 +225,7 @@ ${banner}
     projectName,
     useTypeScript,
     usePackageManager,
-    usePreset,
-    useStore,
-    useEslint,
-    useRouter
+    usePreset
   } = await initPrompts(context);
   const projectRoot = (0, import_path3.join)(cwd, projectName);
   if (canOverwrite) {
@@ -267,23 +236,12 @@ ${banner}
   const jsOrTs = useTypeScript ? "typescript" : "javascript";
   let templatePath = (0, import_path3.resolve)(__dirname, "../template", jsOrTs);
   console.log("\n\u25CC Generating scaffold...");
-  if (usePreset !== "custom") {
-    renderTemplate((0, import_path3.resolve)(templatePath, usePreset), projectRoot);
-  } else {
-    renderTemplate((0, import_path3.resolve)(templatePath, "default"), projectRoot);
-    templatePath = (0, import_path3.resolve)(templatePath, usePreset);
-    if (useEslint) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "eslint"), projectRoot);
-    }
-    if (useRouter) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "router"), projectRoot);
-    }
-    if (useStore) {
-      renderTemplate((0, import_path3.resolve)(templatePath, "store"), projectRoot);
-      if (useRouter) {
-        renderTemplate((0, import_path3.resolve)(templatePath, "router-pinia"), projectRoot);
-      }
-    }
+  renderTemplate((0, import_path3.resolve)(templatePath, "default"), projectRoot);
+  if (["base", "essentials"].includes(usePreset)) {
+    renderTemplate((0, import_path3.resolve)(templatePath, "base"), projectRoot);
+  }
+  if (["essentials", "recommended"].includes(usePreset)) {
+    renderTemplate((0, import_path3.resolve)(templatePath, "essentials"), projectRoot);
   }
   if (usePackageManager) {
     console.log(`\u25CC Installing dependencies with ${usePackageManager}...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vuetify",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "dist/output.cjs",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@typescript-eslint/parser": "^5.30.6",
     "esbuild": "^0.14.47",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.41.0",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-local-rules": "^1.3.0",
     "eslint-plugin-lodash-template": "^0.21.0",

package/template/javascript/base/package.json

@@ -1,27 +1,19 @@
 {
-  "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",
-    "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.0.0"
+    "core-js": "^3.34.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"
+    "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/javascript/base/src/App.vue

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

package/template/javascript/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/javascript/{essentials/src/App.vue → base/src/pages/index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <router-view />
+  <HelloWorld />
 </template>
 
 <script setup>

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

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

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

@@ -1,26 +1,16 @@
-// 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 (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
-      },
-    ],
-  },
-]
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { setupLayouts } from 'virtual:generated-layouts'
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
+  extendRoutes: setupLayouts,
 })
 
 export default router

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

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

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

@@ -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,16 +12,18 @@ 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/next/packages/vite-plugin
-    vuetify({
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
       autoImport: true,
       styles: {
         configFile: 'src/styles/settings.scss',
       },
     }),
+    Components(),
     ViteFonts({
       google: {
         families: [{

package/template/javascript/default/README.md

@@ -1,53 +1,77 @@
-# 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)
+- ⚡ **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)
 
-# 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/javascript/default/_gitignore

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

package/template/javascript/default/jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",

package/template/javascript/default/package.json

@@ -1,20 +1,22 @@
 {
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "node --no-warnings ./node_modules/.bin/vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vuetify": "^3.0.0",
+    "vue": "^3.3.0",
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "vite-plugin-vuetify": "^1.0.0",
-    "vite": "^4.2.0",
-    "unplugin-fonts": "^1.0.3"
+    "@vitejs/plugin-vue": "^4.5.0",
+    "sass": "^1.69.0",
+    "vite-plugin-vuetify": "^2.0.0",
+    "vite": "^5.0.0",
+    "unplugin-vue-components": "^0.26.0",
+    "unplugin-fonts": "^1.1.0"
   }
 }

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

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

package/template/javascript/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/javascript/default/src/main.js

@@ -4,15 +4,15 @@
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
 
+// Plugins
+import { registerPlugins } from '@/plugins'
+
 // Components
 import App from './App.vue'
 
 // Composables
 import { createApp } from 'vue'
 
-// Plugins
-import { registerPlugins } from '@/plugins'
-
 const app = createApp(App)
 
 registerPlugins(app)

package/template/javascript/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/javascript/default/src/plugins/vuetify.js

@@ -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',
-        },
-      },
-    },
-  },
+  //
 })