Update vuetify 3.3.1.

Changed Treeshaking algorithm. (Fix for #14). Fixed Navigation block problem (#16).
logue · May 24, 2023 · bc0cbea · bc0cbea
1 parent 44f6ad3
commit bc0cbea
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 283 deletions.
diff --git a/env.d.ts b/env.d.ts
@@ -6,6 +6,9 @@ declare module 'vuetify' {
   import vuetify from 'vuetify/dist/vuetify.d.ts';
   return vuetify;
 }
+// if use color
+// declare module 'vuetify/lib/util/colors.mjs';
+
 interface ImportMetaEnv {
   // see https://vitejs.dev/guide/env-and-mode.html#env-files
   // add .env variables.

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vite-vuetify-ts-starter",
   "description": "Vue3 Vuetify TypeScript Startar project for Vite.",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "MIT",
   "type": "module",
   "private": true,
@@ -46,17 +46,17 @@
     "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.1",
-    "vuetify": "^3.3.0",
+    "vuetify": "^3.3.1",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/types": "^7.21.5",
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@rushstack/eslint-patch": "^1.3.0",
     "@tsconfig/node-lts": "^18.12.2",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^20.2.3",
     "@types/webfontloader": "^1.6.35",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.31.1",
     "@vue/eslint-config-prettier": "^7.1.0",
@@ -86,15 +86,15 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
     "stylelint": "^15.6.2",
-    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-order": "^6.0.3",
     "typescript": "*",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.3.8",
     "vite-plugin-checker": "0.6.0",
     "vite-plugin-vuetify": "^1.0.2",
-    "vitest": "^0.31.1",
+    "vitest": "^0.29.0",
     "vue-eslint-parser": "^9.3.0",
     "vue-tsc": "^1.7.0"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -60,10 +60,7 @@ const isDark: ComputedRef<string> = computed(() =>
 // When snackbar text has been set, show snackbar.
 watch(
   () => globalStore.message,
-  async message => {
-    snackbarVisibility.value = message !== '';
-    await nextTick();
-  }
+  message => (snackbarVisibility.value = message !== '')
 );
 
 /** Clear store when snackbar hide */
@@ -72,12 +69,8 @@ const onSnackbarChanged = async () => {
   await nextTick();
 };
 
-// When loading overlay value change, force redraw screen.
-watch(loading, async () => await nextTick());
-
 onMounted(() => {
   document.title = title;
-  loading.value = false;
 });
 </script>
 

diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
@@ -2,11 +2,11 @@
  * Vuetify3 Plugin
  */
 // @ts-expect-error
-import { createVuetify, type VuetifyOptions } from 'vuetify';
+import { createVuetify, type VuetifyConfig } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
 import { aliases, mdi } from 'vuetify/iconsets/mdi';
-import * as labs from 'vuetify/labs/components';
+import * as labsComponents from 'vuetify/labs/components';
 // Translations provided by Vuetify
 import { en } from 'vuetify/locale';
 
@@ -22,34 +22,12 @@ await loadFonts();
 /**
  * Vuetify Components
  *
- * Notice: This variable is used during development to load all components to speed up the display
- *         and to reduce the size during build.
- *
- * @see {@link https://vuetifyjs.com/en/labs/introduction/}
+ * @see {@link https://vuetifyjs.com/en/features/treeshaking/}
  */
-const vuetifyComponents: VuetifyOptions = import.meta.env.DEV
-  ? {
-      // For development
-      components: {
-        components,
-        ...labs,
-      },
-      directives,
-    }
-  : {
-      // For production
-      components: {
-        components,
-        ...labs,
-      },
-    };
-
-export default createVuetify({
-  ...vuetifyComponents,
-  ...{
-    // Global configuration
-    // https://next.vuetifyjs.com/en/features/global-configuration/
-    /*
+let vuetifyConfig: VuetifyConfig = {
+  // Global configuration
+  // https://vuetifyjs.com/en/features/global-configuration/
+  /*
   defaults: {
     global: {
       ripple: false,
@@ -59,29 +37,38 @@ export default createVuetify({
     },
   },
   */
-    // Icon Fonts
-    // https://next.vuetifyjs.com/en/features/icon-fonts/
-    icons: {
-      defaultSet: 'mdi',
-      aliases,
-      sets: {
-        mdi,
-      },
-    },
-    // Internationalization (i18n)
-    // https://next.vuetifyjs.com/en/features/internationalization/#internationalization-i18n
-    locale: {
-      locale: 'en',
-      fallback: 'en',
-      messages: { en },
-    },
-    // Theme
-    // https://next.vuetifyjs.com/en/features/theme/
-    theme: {
-      defaultTheme: 'light',
+  // Icon Fonts
+  // https://vuetifyjs.com/en/features/icon-fonts/
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
     },
   },
-});
+  // Internationalization (i18n)
+  // https://vuetifyjs.com/en/features/internationalization/#internationalization-i18n
+  locale: {
+    locale: 'en',
+    fallback: 'en',
+    messages: { en },
+  },
+  // Theme
+  // https://vuetifyjs.com/en/features/theme/
+  theme: {
+    defaultTheme: 'light',
+  },
+};
+
+if (import.meta.env.DEV) {
+  // Disable treeshaking for DEV mode.
+  vuetifyConfig = {
+    components: { components, labsComponents },
+    directives,
+    ...vuetifyConfig,
+  };
+}
+export default createVuetify(vuetifyConfig);
 
 // Export for test.
 export { components, directives };
diff --git a/src/router.ts b/src/router.ts
@@ -1,4 +1,3 @@
-import { nextTick } from 'vue';
 import {
   createRouter,
   createWebHistory,
@@ -8,15 +7,15 @@ import {
   type RouteRecordRaw,
 } from 'vue-router';
 
-// Pinia Store
+// Components
 import HomeView from '@/views/HomeView.vue';
 
+// Pinia Store
 import { useGlobal } from '@/store';
 
+// Unimplemented in Vuetify 3.3.1
 // import { goTo } from 'vuetify/lib/services/goto/index.mjs';
 
-// Components
-
 /** Router Rules */
 const routes: RouteRecordRaw[] = [
   {
@@ -43,16 +42,14 @@ const router: Router = createRouter({
    */
   history: createWebHistory(import.meta.env.BASE_URL), // createWebHashHistory(import.meta.env.BASE_URL)
   /*
-  // Unimplemented in Vuetify 3.1.6
-  scrollBehavior: (to, _from, savedPosition ) => {
+  scrollBehavior: (to, _from, savedPosition) => {
     let scrollTo: number | string = 0;
 
     if (to.hash) {
       scrollTo = to.hash;
     } else if (savedPosition) {
       scrollTo = savedPosition.top;
     }
-
     return goTo(scrollTo);
   },
   */
@@ -69,11 +66,10 @@ router.beforeEach(
   ) => {
     const globalStore = useGlobal();
     // Show Loading
-    globalStore.setLoading(true);
+    // comment out for https://github.com/logue/vite-vuetify-ts-starter/issues/16
+    // globalStore.setLoading(true);
     // Hide snack bar
     globalStore.setMessage('');
-    await nextTick();
-
     next();
   }
 );

diff --git a/vite.config.ts b/vite.config.ts
@@ -31,7 +31,7 @@ export default defineConfig(({ command, mode }): UserConfig => {
         },
       }),
       // Vuetify Loader
-      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#vite-plugin-vuetify
+      // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
       vuetify({
         autoImport: true,
         styles: { configFile: 'src/styles/settings.scss' },
@@ -87,7 +87,7 @@ export default defineConfig(({ command, mode }): UserConfig => {
               'vuetify',
               'vuetify/components',
               'vuetify/directives',
-              // 'vuetify/labs',
+              // 'vuetify/lib/labs',
               'webfontloader',
             ],
             materialdesignicons: ['@mdi/font/css/materialdesignicons.css'],