create-vuetify 2.8.0 → 3.0.1

package/template/typescript/nuxt/app.vue

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

package/template/typescript/nuxt/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/typescript/nuxt/components/AppFooter.vue

@@ -1,82 +0,0 @@
-<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
-    app
-    height="40"
-  >
-    <NuxtLink
-      v-for="item in items"
-      :key="item.title"
-      class="d-inline-block mx-2 social-link"
-      :href="item.href"
-      rel="noopener noreferrer"
-      target="_blank"
-      :title="item.title"
-    >
-      <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

@@ -1,90 +0,0 @@
-<template>
-  <v-container class="fill-height d-flex align-center" max-width="900">
-    <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="~/assets/logo.png"
-      />
-
-      <div class="mb-8 text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 my-0 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <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="tonal"
-          >
-            <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-card>
-        </v-col>
-
-        <v-col v-for="link in links" :key="link.href" cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            :href="link.href"
-            :prepend-icon="link.icon"
-            rel="noopener noreferrer"
-            rounded="lg"
-            :subtitle="link.subtitle"
-            target="_blank"
-            :title="link.title"
-            variant="tonal"
-          />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>
-
-<script setup>
-  const links = [
-    {
-      href: 'https://vuetifyjs.com/',
-      icon: 'mdi-text-box-outline',
-      subtitle: 'Learn about all things Vuetify in our documentation.',
-      title: 'Documentation',
-    },
-    {
-      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
-      icon: 'mdi-star-circle-outline',
-      subtitle: 'Explore available framework Features.',
-      title: 'Features',
-    },
-    {
-      href: 'https://vuetifyjs.com/components/all',
-      icon: 'mdi-widgets-outline',
-      subtitle: 'Discover components in the API Explorer.',
-      title: 'Components',
-    },
-    {
-      href: 'https://discord.vuetifyjs.com',
-      icon: 'mdi-account-group-outline',
-      subtitle: 'Connect with Vuetify developers.',
-      title: 'Community',
-    },
-  ]
-</script>

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

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

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

@@ -1,137 +0,0 @@
-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 { isObject, resolveVuetifyBase } from '@vuetify/loader-shared'
-import { pathToFileURL } from 'node:url'
-import fs from 'node:fs'
-import fsp from 'node:fs/promises'
-
-// 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}`
-    const resolveCss = resolveCssFactory()
-
-    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,
-      }), {
-        name: 'vuetify:nuxt:styles',
-        enforce: 'pre',
-        async configResolved (config) {
-          if (isObject(options.styles)) {
-            sassVariables = true
-            configFile = path.isAbsolute(options.styles.configFile) ? path.resolve(options.styles.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 (/\.s[ca]ss$/.test(source)) {
-              return source
-            }
-
-            const idx = source.indexOf('?')
-            return idx === -1 ? source : source.slice(0, idx)
-          }
-          if (
-            source === 'vuetify/styles' || (
-              importer
-              && source.endsWith('.css')
-              && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
-            )
-          ) {
-            if (options.styles === 'sass') {
-              return this.resolve(await resolveCss(source), importer, { skipSelf: true, custom })
-            }
-
-            const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
-
-            if (!resolution) {
-              return undefined
-            }
-
-            const target = await resolveCss(resolution.id)
-            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) {
-              const suffix = /\.scss/.test(target) ? ';\n' : '\n'
-              return {
-                code: `@use "${configFile}"${suffix}@use "${pathToFileURL(target).href}"${suffix}`,
-                map: {
-                  mappings: '',
-                },
-              }
-            }
-          }
-
-          return isNone && noneFiles.has(id) ? '' : undefined
-        },
-      })
-    })
-  },
-})
-
-function resolveCssFactory () {
-  const mappings = new Map<string, string>()
-  return async (source: string) => {
-    let mapping = mappings.get(source)
-    if (!mapping) {
-      try {
-        mapping = source.replace(/\.css$/, '.sass')
-        await fsp.access(mapping, fs.constants.R_OK)
-      } catch (error) {
-        if (!(error instanceof Error && 'code' in error && error.code === 'ENOENT')) {
-          throw error
-        }
-        mapping = source.replace(/\.css$/, '.scss')
-      }
-      mappings.set(source, mapping)
-    }
-    return mapping
-  }
-}
-
-function isSubdir (root: string, test: string) {
-  const relative = path.relative(root, test)
-  return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
-}
-
-export { type Options as ModuleOptions } from '@vuetify/loader-shared'

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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