diff --git a/package.json b/package.json index 8d3f126..21a00a0 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "ts-enum-util": "^4.1.0", "utils4u": "^2.3.0", "vant": "^4.9.4", + "vite-plugin-webfont-dl": "^3.9.5", "vue": "^3.4.38", "vue-page-stack": "^3.2.0", "vue-router": "^4.4.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f3432a..c596f7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,6 +67,9 @@ importers: vant: specifier: ^4.9.4 version: 4.9.4(vue@3.4.38(typescript@5.5.4)) + vite-plugin-webfont-dl: + specifier: ^3.9.5 + version: 3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0)) vue: specifier: ^3.4.38 version: 3.4.38(typescript@5.5.4) @@ -1547,6 +1550,10 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz} engines: {node: '>= 8.10.0'} + clean-css@5.3.3: + resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==, tarball: https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz} + engines: {node: '>= 10.0'} + cli-cursor@5.0.0: resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==, tarball: https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz} engines: {node: '>=18'} @@ -1888,6 +1895,10 @@ packages: resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz} engines: {node: ^10.12.0 || >=12.0.0} + flat-cache@5.0.0: + resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz} + engines: {node: '>=18'} + flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==, tarball: https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz} @@ -3099,6 +3110,11 @@ packages: peerDependencies: vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 + vite-plugin-webfont-dl@3.9.5: + resolution: {integrity: sha512-PSVM7s1XurzMPYXgUHBpZOJYsuzRNq3DGIABdUyq/mNFan1n434+NbmGTK9f9+dIDVHpitXFiE3CmbAdDyDQMg==, tarball: https://registry.npmjs.org/vite-plugin-webfont-dl/-/vite-plugin-webfont-dl-3.9.5.tgz} + peerDependencies: + vite: ^2 || ^3 || ^4 || ^5 + vite@5.4.2: resolution: {integrity: sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==, tarball: https://registry.npmjs.org/vite/-/vite-5.4.2.tgz} engines: {node: ^18.0.0 || >=20.0.0} @@ -4851,6 +4867,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + clean-css@5.3.3: + dependencies: + source-map: 0.6.1 + cli-cursor@5.0.0: dependencies: restore-cursor: 5.1.0 @@ -5230,6 +5250,11 @@ snapshots: keyv: 4.5.4 rimraf: 3.0.2 + flat-cache@5.0.0: + dependencies: + flatted: 3.3.1 + keyv: 4.5.4 + flatted@3.3.1: {} follow-redirects@1.15.6: {} @@ -6029,8 +6054,7 @@ snapshots: source-map-js@1.2.0: {} - source-map@0.6.1: - optional: true + source-map@0.6.1: {} sourcemap-codec@1.4.8: {} @@ -6519,6 +6543,16 @@ snapshots: transitivePeerDependencies: - supports-color + vite-plugin-webfont-dl@3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0)): + dependencies: + axios: 1.7.5 + clean-css: 5.3.3 + flat-cache: 5.0.0 + picocolors: 1.0.1 + vite: 5.4.2(@types/node@22.5.0)(less@4.2.0) + transitivePeerDependencies: + - debug + vite@5.4.2(@types/node@22.5.0)(less@4.2.0): dependencies: esbuild: 0.21.5 diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue index a266bcd..4fee8f2 100644 --- a/src/pages/index-page.vue +++ b/src/pages/index-page.vue @@ -47,4 +47,26 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => ( + +
+

🔌 Vite Plugin Webfont DL ⚡

+

Fonts are downloaded directly from Google Fonts

+

{{ JSON.stringify({ $style }) }}

+
+ + diff --git a/vite.config.ts b/vite.config.ts index a0eaa2b..eb25876 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -18,6 +18,7 @@ import { createSplitChunkOutput } from 'utils4u/rollup'; import { defineConfig, loadEnv, PluginOption } from 'vite'; import cdnImport from 'vite-plugin-cdn-import'; import vueDevTools from 'vite-plugin-vue-devtools'; +import { ViteWebfontDownload } from 'vite-plugin-webfont-dl'; // https://vitejs.dev/config/ export default defineConfig(({ mode, command }) => { @@ -109,6 +110,15 @@ function Plugins() { plugins.push([vueDevTools()]); + plugins.push( + // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b- + ViteWebfontDownload([ + 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap', + 'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap', + 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900', + ]), + ); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const unused = () => { plugins.push( // https://github.com/unplugin/unplugin-vue-components/issues/664$0