create-vuetify 2.2.6 → 2.3.1

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

package/template/javascript/base/_eslintrc.js

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

package/template/javascript/essentials/_eslintrc.js

@@ -1,19 +0,0 @@
-/**
- * .eslint.js
- *
- * ESLint configuration file.
- */
-
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'vuetify',
-    './.eslintrc-auto-import.json',
-  ],
-  rules: {
-    'vue/multi-word-component-names': 'off',
-  },
-}

package/template/typescript/base/_eslintrc.js

@@ -1,20 +0,0 @@
-/**
- * .eslint.js
- *
- * ESLint configuration file.
- */
-
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-  ],
-  rules: {
-    'vue/multi-word-component-names': 'off',
-  },
-}

package/template/typescript/base/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "vite/client",
-      "unplugin-vue-router/client"
-    ],
-    "allowJs": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "src/**/*",
-    "src/**/*.vue"
-  ],
-  "exclude": ["dist", "node_modules", "cypress"],
-  "references": [{ "path": "./tsconfig.node.json" }],
-}

package/template/typescript/default/src/vite-env.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

package/template/typescript/essentials/_eslintrc.js

@@ -1,20 +0,0 @@
-/**
- * .eslint.js
- *
- * ESLint configuration file.
- */
-
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'vuetify',
-    '@vue/eslint-config-typescript',
-    './.eslintrc-auto-import.json',
-  ],
-  rules: {
-    'vue/multi-word-component-names': 'off',
-  },
-}

package/template/typescript/essentials/tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "vite/client",
-      "vite-plugin-vue-layouts/client",
-      "unplugin-vue-router/client"
-    ],
-    "allowJs": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "src/**/*",
-    "src/**/*.vue"
-  ],
-  "exclude": ["dist", "node_modules", "cypress"],
-  "references": [{ "path": "./tsconfig.node.json" }],
-}