create-vuetify 1.1.1 → 2.1.0

package/template/typescript/essentials/package.json

@@ -1,33 +1,7 @@
 {
-  "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",
-    "pinia": "^2.0.0",
-    "roboto-fontface": "*",
-    "vue": "^3.2.0",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.0.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.37.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"
+    "pinia" : "^2.1.0",
+    "unplugin-auto-import": "^0.17.3",
+    "vite-plugin-vue-layouts": "^0.10.0"
   }
 }

package/template/typescript/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/typescript/essentials/src/layouts/default.vue

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

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

@@ -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 (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'
+import { setupLayouts } from 'virtual:generated-layouts'
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
+  extendRoutes: setupLayouts,
 })
 
 export default router

package/template/typescript/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/typescript/essentials/vite.config.mts

@@ -0,0 +1,68 @@
+// Plugins
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import Fonts from 'unplugin-fonts/vite'
+import Layouts from 'vite-plugin-vue-layouts'
+import Vue from '@vitejs/plugin-vue'
+import VueRouter from 'unplugin-vue-router/vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    VueRouter(),
+    Layouts(),
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Components(),
+    Fonts({
+      google: {
+        families: [ {
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
+    AutoImport({
+      imports: [
+        'vue',
+        'vue-router',
+      ],
+      dts: true,
+      eslintrc: {
+        enabled: true,
+      },
+      vueTemplate: true,
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})

package/template/javascript/base/README.md

@@ -1,69 +0,0 @@
-# base
-
-## Project setup
-
-```
-# yarn
-yarn
-
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# pnpm
-bun install
-```
-
-### Compiles and hot-reloads for development
-
-```
-# yarn
-yarn dev
-
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# bun
-bun run dev
-```
-
-### Compiles and minifies for production
-
-```
-# yarn
-yarn build
-
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# bun
-bun run build
-```
-
-### Lints and fixes files
-
-```
-# yarn
-yarn lint
-
-# npm
-npm run lint
-
-# pnpm
-pnpm lint
-
-# bun
-bun run lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://vitejs.dev/config/).

package/template/javascript/base/_browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

package/template/javascript/base/_editorconfig

@@ -1,5 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true

package/template/javascript/base/_gitignore

@@ -1,22 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/template/javascript/base/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Welcome to Vuetify 3</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>

package/template/javascript/base/jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

package/template/javascript/base/src/assets/logo.svg

@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>

package/template/javascript/base/src/components/HelloWorld.vue

@@ -1,75 +0,0 @@
-<template>
-  <v-container class="fill-height">
-    <v-responsive class="align-center text-center fill-height">
-      <v-img height="300" src="@/assets/logo.svg" />
-
-      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-
-      <div class="py-14" />
-
-      <v-row class="d-flex align-center justify-center">
-        <v-col cols="auto">
-          <v-btn
-            href="https://vuetifyjs.com/components/all/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-view-dashboard"
-              size="large"
-              start
-            />
-
-            Components
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            color="primary"
-            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            min-width="228"
-            rel="noopener noreferrer"
-            size="x-large"
-            target="_blank"
-            variant="flat"
-          >
-            <v-icon
-              icon="mdi-speedometer"
-              size="large"
-              start
-            />
-
-            Get Started
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn
-            href="https://community.vuetifyjs.com/"
-            min-width="164"
-            rel="noopener noreferrer"
-            target="_blank"
-            variant="text"
-          >
-            <v-icon
-              icon="mdi-account-group"
-              size="large"
-              start
-            />
-
-            Community
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-responsive>
-  </v-container>
-</template>
-
-<script setup>
-  //
-</script>

package/template/javascript/base/src/layouts/default/AppBar.vue

@@ -1,13 +0,0 @@
-<template>
-  <v-app-bar flat>
-    <v-app-bar-title>
-      <v-icon icon="mdi-circle-slice-4" />
-
-      Base Preset
-    </v-app-bar-title>
-  </v-app-bar>
-</template>
-
-<script setup>
-  //
-</script>

package/template/javascript/base/src/layouts/default/Default.vue

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

package/template/javascript/base/src/layouts/default/View.vue

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

package/template/javascript/base/src/main.js

@@ -1,20 +0,0 @@
-/**
- * main.js
- *
- * 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'
-
-const app = createApp(App)
-
-registerPlugins(app)
-
-app.mount('#app')

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

@@ -1,26 +0,0 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
-
-// Composables
-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/javascript/base/src/views/Home.vue

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

package/template/javascript/custom/eslint/_eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-  ],
-}

package/template/javascript/custom/eslint/package.json

@@ -1,9 +0,0 @@
-{
-  "scripts": {
-    "lint": "eslint . --fix --ignore-path .gitignore"
-  },
-  "devDependencies": {
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0"
-  }
-}

package/template/javascript/custom/router/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "vue-router": "^4.0.0"
-  }
-}

package/template/javascript/custom/router/src/App.vue

@@ -1,7 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script setup>
-  //
-</script>

package/template/javascript/custom/router/src/layouts/default/Default.vue

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

package/template/javascript/custom/router/src/layouts/default/View.vue

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

package/template/javascript/custom/router/src/plugins/index.js

@@ -1,15 +0,0 @@
-/**
- * plugins/index.js
- *
- * Automatically included in `./src/main.js`
- */
-
-// Plugins
-import vuetify from './vuetify'
-import router from '../router'
-
-export function registerPlugins (app) {
-  app
-    .use(vuetify)
-    .use(router)
-}

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

@@ -1,26 +0,0 @@
-// Composables
-import { createRouter, createWebHistory } from 'vue-router'
-
-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'),
-      },
-    ],
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-})
-
-export default router

package/template/javascript/custom/router/src/views/Home.vue

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

package/template/javascript/custom/router-pinia/src/plugins/index.js

@@ -1,17 +0,0 @@
-/**
- * plugins/index.js
- *
- * Automatically included in `./src/main.js`
- */
-
-// Plugins
-import vuetify from './vuetify'
-import pinia from '../store'
-import router from '../router'
-
-export function registerPlugins (app) {
-  app
-    .use(vuetify)
-    .use(pinia)
-    .use(router)
-}

package/template/javascript/custom/store/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "pinia": "^2.0.23"
-  }
-}

package/template/javascript/custom/store/src/plugins/index.js

@@ -1,15 +0,0 @@
-/**
- * plugins/index.js
- *
- * Automatically included in `./src/main.js`
- */
-
-// Plugins
-import vuetify from './vuetify'
-import pinia from '../store'
-
-export function registerPlugins (app) {
-  app
-    .use(vuetify)
-    .use(pinia)
-}

package/template/javascript/custom/store/src/store/app.js

@@ -1,8 +0,0 @@
-// Utilities
-import { defineStore } from 'pinia'
-
-export const useAppStore = defineStore('app', {
-  state: () => ({
-    //
-  }),
-})

package/template/javascript/custom/store/src/store/index.js

@@ -1,4 +0,0 @@
-// Utilities
-import { createPinia } from 'pinia'
-
-export default createPinia()