create-vuetify 2.2.5 → 2.3.0

package/template/typescript/essentials/_eslintrc-auto-import.json

@@ -0,0 +1,69 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

package/template/typescript/essentials/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
+/// <reference types="vite-plugin-vue-layouts/client" />

package/template/typescript/essentials/package.json

@@ -1,7 +1,7 @@
 {
   "devDependencies": {
     "pinia" : "^2.1.7",
-    "unplugin-auto-import": "^0.17.5",
+    "unplugin-auto-import": "^0.17.6",
     "vite-plugin-vue-layouts": "^0.11.0"
   }
 }

package/template/typescript/essentials/src/components/AppFooter.vue

@@ -47,7 +47,7 @@
     },
     {
       title: 'Vuetify X',
-      icon: `svg:M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z`,
+      icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
       href: 'https://x.com/vuetifyjs',
     },
     {
@@ -57,7 +57,7 @@
     },
     {
       title: 'Vuetify Discord',
-      icon: `mdi-discord`,
+      icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
       href: 'https://community.vuetifyjs.com/',
     },
     {

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

@@ -7,10 +7,30 @@
 // Composables
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { routes } from 'vue-router/auto-routes'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  extendRoutes: setupLayouts,
+  routes: setupLayouts(routes),
+})
+
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    } else {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
 })
 
 export default router

package/template/typescript/essentials/vite.config.mts

@@ -71,4 +71,11 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: 'modern-compiler',
+      },
+    },
+  },
 })

package/template/typescript/nuxt/app-layout.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/template/typescript/nuxt/app.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <v-main>
+      <NuxtPage />
+    </v-main>
+
+    <AppFooter />
+  </v-app>
+</template>

package/template/typescript/nuxt/components/AppFooter.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const items = shallowRef([
+  {
+    title: 'Vuetify Documentation',
+    icon: `$vuetify`,
+    href: 'https://vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify Support',
+    icon: 'mdi-shield-star-outline',
+    href: 'https://support.vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify X',
+    icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
+    href: 'https://x.com/vuetifyjs',
+  },
+  {
+    title: 'Vuetify GitHub',
+    icon: `mdi-github`,
+    href: 'https://github.com/vuetifyjs/vuetify',
+  },
+  {
+    title: 'Vuetify Discord',
+    icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
+    href: 'https://community.vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify Reddit',
+    icon: `mdi-reddit`,
+    href: 'https://reddit.com/r/vuetifyjs',
+  },
+])
+</script>
+
+<template>
+  <v-footer height="40" app>
+    <NuxtLink
+      v-for="item in items"
+      :key="item.title"
+      :href="item.href"
+      :title="item.title"
+      class="d-inline-block mx-2 social-link"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <v-icon
+        :icon="item.icon"
+        :size="item.icon === '$vuetify' ? 24 : 16"
+      />
+    </NuxtLink>
+
+    <div
+      class="text-caption text-disabled"
+      style="position: absolute; right: 16px;"
+    >
+      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      —
+      <NuxtLink
+        class="text-decoration-none on-surface"
+        href="https://vuetifyjs.com/about/licensing/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        MIT License
+      </NuxtLink>
+    </div>
+  </v-footer>
+</template>
+
+<style scoped lang="sass">
+  .social-link :deep(.v-icon)
+    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+    text-decoration: none
+    transition: .2s ease-in-out
+
+    &:hover
+      color: rgba(25, 118, 210, 1)
+</style>

package/template/typescript/nuxt/components/HelloWorld.vue

@@ -0,0 +1,153 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive
+      class="align-centerfill-height mx-auto"
+      max-width="900"
+    >
+      <v-img
+        class="mb-4"
+        height="150"
+        src="~/assets/logo.png"
+      />
+
+      <div class="text-center">
+        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+
+        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+      </div>
+
+      <div class="py-4" />
+
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            prepend-icon="mdi-rocket-launch-outline"
+            rounded="lg"
+            variant="outlined"
+          >
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <h2 class="text-h5 font-weight-bold">Get started</h2>
+            </template>
+
+            <template #subtitle>
+              <div class="text-subtitle-1">
+                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
+              </div>
+            </template>
+
+            <v-overlay
+              opacity=".12"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/"
+            prepend-icon="mdi-text-box-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Learn about all things Vuetify in our documentation."
+            target="_blank"
+            title="Documentation"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            prepend-icon="mdi-star-circle-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Explore available framework Features."
+            target="_blank"
+            title="Features"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/components/all"
+            prepend-icon="mdi-widgets-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Discover components in the API Explorer."
+            target="_blank"
+            title="Components"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://discord.vuetifyjs.com"
+            prepend-icon="mdi-account-group-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Connect with Vuetify developers."
+            target="_blank"
+            title="Community"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>

package/template/typescript/nuxt/layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <v-main>
+      <slot />
+    </v-main>
+
+    <AppFooter />
+  </v-app>
+</template>

package/template/typescript/nuxt/modules/vuetify.ts

@@ -0,0 +1,125 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import type { Options as ModuleOptions } from '@vuetify/loader-shared'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import path from 'upath'
+import { resolveVuetifyBase, isObject } from '@vuetify/loader-shared'
+import { pathToFileURL } from 'node:url'
+
+export type { ModuleOptions }
+
+// WARNING: Remove the file from modules directory if you install vuetify-nuxt-module
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'vuetify-module',
+    configKey: 'vuetify',
+  },
+  defaults: () => ({ styles: true }),
+  setup(options, nuxt) {
+    let configFile: string | undefined
+    const vuetifyBase = resolveVuetifyBase()
+    const noneFiles = new Set<string>()
+    let isNone = false
+    let sassVariables = false
+    const PREFIX = 'vuetify-styles/'
+    const SSR_PREFIX = `/@${PREFIX}`
+
+    nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
+      // add vuetify transformAssetUrls
+      viteInlineConfig.vue ??= {}
+      viteInlineConfig.vue.template ??= {}
+      viteInlineConfig.vue.template.transformAssetUrls = transformAssetUrls
+
+      viteInlineConfig.plugins = viteInlineConfig.plugins ?? []
+      viteInlineConfig.plugins.push(vuetify({
+        autoImport: options.autoImport,
+        styles: true,
+      }))
+
+      viteInlineConfig.css ??= {}
+      viteInlineConfig.css.preprocessorOptions ??= {}
+      viteInlineConfig.css.preprocessorOptions.sass ??= {}
+      viteInlineConfig.css.preprocessorOptions.sass.api = 'modern-compiler'
+
+      viteInlineConfig.plugins.push({
+        name: 'vuetify:nuxt:styles',
+        enforce: 'pre',
+        async configResolved (config) {
+          if (isObject(options.styles)) {
+            sassVariables = true
+            if (path.isAbsolute(options.styles.configFile)) {
+              configFile = path.resolve(options.styles.configFile)
+            } else {
+              configFile = path.resolve(path.join(config.root || process.cwd(), options.styles.configFile))
+            }
+            configFile = pathToFileURL(configFile).href
+          }
+          else {
+            isNone = options.styles === 'none'
+          }
+        },
+        async resolveId (source, importer, { custom, ssr }) {
+          if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX)) {
+            if (source.endsWith('.sass')) {
+              return source
+            }
+
+            const idx = source.indexOf('?')
+            return idx > -1 ? source.slice(0, idx) : source
+          }
+          if (
+            source === 'vuetify/styles' || (
+              importer &&
+              source.endsWith('.css') &&
+              isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+            )
+          ) {
+            if (options.styles === 'sass') {
+              const target = source.replace(/\.css$/, '.sass')
+              return this.resolve(target, importer, { skipSelf: true, custom })
+            }
+
+            const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
+
+            if (!resolution)
+              return undefined
+
+            const target = resolution.id.replace(/\.css$/, '.sass')
+            if (isNone) {
+              noneFiles.add(target)
+              return target
+            }
+
+            return `${ssr ? SSR_PREFIX: PREFIX}${path.relative(vuetifyBase, target)}`
+          }
+
+          return undefined
+        },
+        load(id){
+          if (sassVariables) {
+            const target = id.startsWith(PREFIX)
+              ? path.resolve(vuetifyBase, id.slice(PREFIX.length))
+              : id.startsWith(SSR_PREFIX)
+                ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length))
+                : undefined
+
+            if (target) {
+              return {
+                code: `@use "${configFile}"\n@use "${pathToFileURL(target).href}"`,
+                map: {
+                  mappings: '',
+                },
+              }
+            }
+          }
+
+          return isNone && noneFiles.has(id) ? '' : undefined
+        },
+      })
+    })
+  }
+})
+
+function isSubdir (root: string, test: string) {
+  const relative = path.relative(root, test)
+  return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
+}

package/template/typescript/nuxt/pages/index.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <HelloWorld />
+</template>
+

package/template/typescript/nuxt/plugins/vuetify-nuxt.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  // check https://vuetify-nuxt-module.netlify.app/guide/nuxt-runtime-hooks.html
+  nuxtApp.hook('vuetify:before-create', (options) => {
+    if (import.meta.client) {
+      console.log('vuetify:before-create', options)
+    }
+  })
+})

package/template/typescript/nuxt/plugins/vuetify.ts

@@ -0,0 +1,14 @@
+import { createVuetify } from 'vuetify'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vuetify = createVuetify({
+    // WARNING: when switching ssr option in nuxt.config.ts file you need to manually change it here
+    ssr: true,
+    // your Vuetify options here
+    theme: {
+      defaultTheme: 'dark',
+    },
+  })
+
+  nuxtApp.vueApp.use(vuetify);
+})

package/template/typescript/nuxt/vuetify.config.ts

@@ -0,0 +1,8 @@
+import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
+
+export default defineVuetifyConfiguration({
+  // your Vuetify options here
+  theme: {
+    defaultTheme: 'dark',
+  },
+})