create-vuetify 2.3.0 → 2.4.0

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

@@ -1,48 +1,51 @@
 <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',
-  },
-])
+  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>
+  <v-footer
+    app
+    height="40"
+  >
     <NuxtLink
       v-for="item in items"
       :key="item.title"
-      :href="item.href"
-      :title="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"

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

@@ -1,23 +1,17 @@
 <template>
-  <v-container class="fill-height">
-    <v-responsive
-      class="align-centerfill-height mx-auto"
-      max-width="900"
-    >
+  <v-container class="fill-height" max-width="900">
+    <div>
       <v-img
         class="mb-4"
         height="150"
         src="~/assets/logo.png"
       />
 
-      <div class="text-center">
+      <div class="mb-8 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
@@ -26,14 +20,16 @@
             image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
             prepend-icon="mdi-rocket-launch-outline"
             rounded="lg"
-            variant="outlined"
+            variant="tonal"
           >
             <template #image>
               <v-img position="top right" />
             </template>
 
             <template #title>
-              <h2 class="text-h5 font-weight-bold">Get started</h2>
+              <h2 class="text-h5 font-weight-bold">
+                Get started
+              </h2>
             </template>
 
             <template #subtitle>
@@ -41,113 +37,54 @@
                 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-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="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            prepend-icon="mdi-star-circle-outline"
+            :href="link.href"
+            :prepend-icon="link.icon"
             rel="noopener noreferrer"
             rounded="lg"
-            subtitle="Explore available framework Features."
+            :subtitle="link.subtitle"
             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>
+            :title="link.title"
+            variant="tonal"
+          />
         </v-col>
       </v-row>
-    </v-responsive>
+    </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/modules/vuetify.ts

@@ -2,8 +2,10 @@ 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 { isObject, resolveVuetifyBase } from '@vuetify/loader-shared'
 import { pathToFileURL } from 'node:url'
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
 
 export type { ModuleOptions }
 
@@ -14,7 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'vuetify',
   },
   defaults: () => ({ styles: true }),
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     let configFile: string | undefined
     const vuetifyBase = resolveVuetifyBase()
     const noneFiles = new Set<string>()
@@ -22,8 +24,9 @@ export default defineNuxtModule<ModuleOptions>({
     let sassVariables = false
     const PREFIX = 'vuetify-styles/'
     const SSR_PREFIX = `/@${PREFIX}`
+    const resolveCss = resolveCssFactory()
 
-    nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
+    nuxt.hook('vite:extendConfig', viteInlineConfig => {
       // add vuetify transformAssetUrls
       viteInlineConfig.vue ??= {}
       viteInlineConfig.vue.template ??= {}
@@ -39,6 +42,8 @@ export default defineNuxtModule<ModuleOptions>({
       viteInlineConfig.css.preprocessorOptions ??= {}
       viteInlineConfig.css.preprocessorOptions.sass ??= {}
       viteInlineConfig.css.preprocessorOptions.sass.api = 'modern-compiler'
+      viteInlineConfig.css.preprocessorOptions.scss ??= {}
+      viteInlineConfig.css.preprocessorOptions.scss.api = 'modern-compiler'
 
       viteInlineConfig.plugins.push({
         name: 'vuetify:nuxt:styles',
@@ -59,7 +64,7 @@ export default defineNuxtModule<ModuleOptions>({
         },
         async resolveId (source, importer, { custom, ssr }) {
           if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX)) {
-            if (source.endsWith('.sass')) {
+            if (source.match(/\.s[ca]ss$/)) {
               return source
             }
 
@@ -74,8 +79,7 @@ export default defineNuxtModule<ModuleOptions>({
             )
           ) {
             if (options.styles === 'sass') {
-              const target = source.replace(/\.css$/, '.sass')
-              return this.resolve(target, importer, { skipSelf: true, custom })
+              return this.resolve(await resolveCss(source), importer, { skipSelf: true, custom })
             }
 
             const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
@@ -83,7 +87,7 @@ export default defineNuxtModule<ModuleOptions>({
             if (!resolution)
               return undefined
 
-            const target = resolution.id.replace(/\.css$/, '.sass')
+            const target = await resolveCss(resolution.id)
             if (isNone) {
               noneFiles.add(target)
               return target
@@ -94,7 +98,7 @@ export default defineNuxtModule<ModuleOptions>({
 
           return undefined
         },
-        load(id){
+        load (id){
           if (sassVariables) {
             const target = id.startsWith(PREFIX)
               ? path.resolve(vuetifyBase, id.slice(PREFIX.length))
@@ -103,8 +107,9 @@ export default defineNuxtModule<ModuleOptions>({
                 : undefined
 
             if (target) {
+              const suffix = target.match(/\.scss/) ? ';\n' : '\n'
               return {
-                code: `@use "${configFile}"\n@use "${pathToFileURL(target).href}"`,
+                code: `@use "${configFile}"${suffix}@use "${pathToFileURL(target).href}"${suffix}`,
                 map: {
                   mappings: '',
                 },
@@ -116,9 +121,29 @@ export default defineNuxtModule<ModuleOptions>({
         },
       })
     })
-  }
+  },
 })
 
+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 (err) {
+        if (!(err instanceof Error && 'code' in err && err.code === 'ENOENT'))
+          throw err
+        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)

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

@@ -5,4 +5,3 @@
 <template>
   <HelloWorld />
 </template>
-

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

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

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

@@ -1,6 +1,6 @@
 import { createVuetify } from 'vuetify'
 
-export default defineNuxtPlugin((nuxtApp) => {
+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,