Skip to content

Commit 281f4cc

Browse files
yugasunyugasun
committedMar 14, 2023
feat: support i18n & unocss
·
v1.1.0
1 parent c7447f1 commit 281f4cc

26 files changed

+3193
-2125
lines changed
 

‎.vscode/extensions.json

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
{
2-
"recommendations": ["Vue.volar"]
3-
}
2+
"recommendations": [
3+
"antfu.iconify",
4+
"antfu.unocss",
5+
"antfu.vite",
6+
"antfu.goto-alias",
7+
"csstools.postcss",
8+
"dbaeumer.vscode-eslint",
9+
"vue.volar",
10+
"lokalise.i18n-ally",
11+
"streetsidesoftware.code-spell-checker"
12+
]
13+
}

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
[![TypeScript](https://img.shields.io/badge/Language-TypeScript-blue)](https://www.typescriptlang.org/)
55
[![Vite](https://img.shields.io/badge/Develop-Vite-747bff)](https://vitejs.dev)
66
[![Pinia](https://img.shields.io/badge/Store-Pinia-f7d336)](https://pinia.vuejs.org)
7+
[![Unocss](https://img.shields.io/badge/CSS-Unocss-858585)](https://uno.antfu.me/)
78
[![Build](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/yugasun/vue-template/actions/workflows/deploy.yml)
89

9-
Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀
10+
Vue template for starter using Vue3 + TypeScript + Vite + Pinia + Unocss 🚀
1011

1112
## Feature
1213

@@ -19,7 +20,9 @@ Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀
1920
- [x] [Element Plus](https://github.com/element-plus/element-plus) 🎉 A Vue.js 3 UI Library made by Element team
2021
- [x] [vueuse](https://github.com/vueuse/vueuse) Collection of essential Vue Composition Utilities for Vue 2 and 3
2122
- [x] [axios](https://github.com/axios/axios) Promise based HTTP client for the browser and node.js
22-
- [x] [Tailwindcss](https://tailwindcss.com/) A utility-first CSS framework for rapid UI development
23+
- [x] 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
24+
- [x] 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
25+
- [x] 🌍 [I18n ready](https://vue-i18n.intlify.dev/) Vue I18n Internationalization plugin for Vue.js
2326
- [x] [msw](https://mswjs.io/docs/) Seamless REST/GraphQL API mocking library for browser and Node.js.
2427
- [x] [ESLint](https://eslint.org/)
2528
- [x] [Prettier](https://prettier.io/)

‎element-preset.js

-110
This file was deleted.

‎locales/en.yml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
detail:
2+
loginTip: 'This is Detail Page, need login'
3+
4+
common:
5+
hello: 'Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀'
6+
welcome: 'Welcome, {name}'
7+
template: Template
8+
docs: Docs
9+
example: Example
10+
isSupported: isSupported
11+
menus: Menus
12+
home: Home
13+
Detail: Detail
14+
15+
home:
16+
recommendIde: 'Recommended IDE setup'
17+
remarks: 'See <code class="dark:text-ternary-dark">README.md</code> for more information.'

‎locales/zh-CN.yml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
detail:
2+
loginTip: 这是详情页，需要登录
3+
4+
common:
5+
hello: '使用 Vue3 + TypeScript + Vite + Pinia 开发的项目模板🚀'
6+
welcome: '欢迎, {name}'
7+
template: 模版
8+
docs: 文档
9+
example: 示例
10+
isSupported: 是否支持
11+
menus: 菜单
12+
home: 主页
13+
Detail: 详情页
14+
15+
home:
16+
recommendIde: '推荐使用的编辑器配置'
17+
remarks: '阅读 <code class="dark:text-ternary-dark">README.md</code> 获得更多信息。'

‎package.json

+45-39
Original file line numberDiff line numberDiff line change
@@ -16,58 +16,64 @@
1616
},
1717
"dependencies": {
1818
"@element-plus/icons-vue": "^1.1.4",
19-
"@vueuse/core": "^8.4.2",
20-
"@vueuse/integrations": "^8.5.0",
19+
"@unocss/reset": "^0.50.4",
20+
"@vueuse/core": "^8.9.4",
21+
"@vueuse/integrations": "^8.9.4",
2122
"axios": "^0.27.2",
22-
"element-plus": "^2.1.11",
23-
"pinia": "^2.0.14",
23+
"element-plus": "^2.3.0",
24+
"pinia": "^2.0.33",
2425
"universal-cookie": "^4.0.4",
25-
"vue": "^3.2.25",
26-
"vue-router": "^4.0.15",
27-
"workbox-core": "^6.5.3",
28-
"workbox-precaching": "^6.5.3",
29-
"workbox-routing": "^6.5.3",
30-
"workbox-window": "^6.5.3"
26+
"vue": "^3.2.47",
27+
"vue-i18n": "^9.2.2",
28+
"vue-router": "^4.1.6",
29+
"workbox-core": "^6.5.4",
30+
"workbox-precaching": "^6.5.4",
31+
"workbox-routing": "^6.5.4",
32+
"workbox-window": "^6.5.4"
3133
},
3234
"devDependencies": {
33-
"@commitlint/cli": "^17.0.0",
34-
"@commitlint/config-conventional": "^17.0.0",
35+
"@commitlint/cli": "^17.4.4",
36+
"@commitlint/config-conventional": "^17.4.4",
37+
"@iconify-json/carbon": "^1.1.16",
38+
"@intlify/unplugin-vue-i18n": "^0.9.2",
3539
"@rollup/plugin-replace": "^4.0.0",
36-
"@types/node": "^17.0.31",
37-
"@typescript-eslint/eslint-plugin": "^5.22.0",
38-
"@typescript-eslint/parser": "^5.22.0",
39-
"@vitejs/plugin-vue": "^3.1.2",
40-
"autoprefixer": "^10.4.7",
41-
"bumpp": "^7.1.1",
42-
"commitizen": "^4.2.4",
40+
"@types/node": "^17.0.45",
41+
"@typescript-eslint/eslint-plugin": "^5.55.0",
42+
"@typescript-eslint/parser": "^5.55.0",
43+
"@vitejs/plugin-vue": "^3.2.0",
44+
"autoprefixer": "^10.4.14",
45+
"bumpp": "^7.2.0",
46+
"commitizen": "^4.3.0",
4347
"commitlint-config-cz": "^0.13.3",
4448
"cz-conventional-changelog": "^3.3.0",
45-
"cz-customizable": "^6.3.0",
46-
"eslint": "^8.14.0",
47-
"eslint-config-prettier": "^8.5.0",
48-
"eslint-plugin-prettier": "^4.0.0",
49+
"cz-customizable": "^6.9.2",
50+
"eslint": "^8.36.0",
51+
"eslint-config-prettier": "^8.7.0",
52+
"eslint-plugin-prettier": "^4.2.1",
4953
"eslint-plugin-vue": "^8.7.1",
50-
"husky": "^8.0.1",
51-
"lint-staged": "^12.4.1",
52-
"msw": "^0.40.1",
53-
"postcss": "^8.4.14",
54-
"postcss-scss": "^4.0.4",
55-
"prettier": "^2.6.2",
56-
"rollup": "^2.75.5",
57-
"sass": "^1.51.0",
54+
"husky": "^8.0.3",
55+
"lint-staged": "^12.5.0",
56+
"msw": "^0.40.2",
57+
"postcss": "^8.4.21",
58+
"postcss-scss": "^4.0.6",
59+
"prettier": "^2.8.4",
60+
"rollup": "^2.79.1",
61+
"sass": "^1.59.2",
5862
"standard-version": "^9.5.0",
59-
"stylelint": "^14.8.2",
60-
"stylelint-config-prettier": "^9.0.3",
63+
"stylelint": "^14.16.1",
64+
"stylelint-config-prettier": "^9.0.5",
6165
"stylelint-config-standard": "^25.0.0",
6266
"stylelint-config-standard-scss": "^4.0.0",
63-
"tailwindcss": "^3.0.24",
64-
"typescript": "^4.7.4",
67+
"tailwindcss": "^3.2.7",
68+
"typescript": "^4.9.5",
69+
"unocss": "^0.50.4",
6570
"unplugin-auto-import": "^0.7.2",
66-
"unplugin-vue-components": "^0.19.3",
67-
"vite": "^3.1.8",
71+
"unplugin-vue-components": "^0.19.9",
72+
"unplugin-vue-macros": "^1.10.0",
73+
"vite": "^3.2.5",
6874
"vite-plugin-html": "^3.2.0",
69-
"vite-plugin-pwa": "^0.13.1",
70-
"vue-tsc": "^0.39.4"
75+
"vite-plugin-pwa": "^0.13.3",
76+
"vue-tsc": "^0.39.5"
7177
},
7278
"config": {
7379
"commitizen": {

‎pnpm-lock.yaml

+2,866-1,888
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ module.exports = {
22
syntax: 'postcss-scss',
33

44
plugins: {
5-
tailwindcss: {},
65
autoprefixer: {},
76
},
87
};

‎src/assets/styles/index.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
/* @tailwind base; */
22
@import './reset';
3-
@import 'tailwindcss/components';
4-
@import 'tailwindcss/utilities';
53

64
a,
75
a:active,

‎src/components/HelloWorld.vue

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n';
23
import { useUserStore } from '@/store/user';
34
45
defineProps<{ msg: string }>();
56
7+
const { t } = useI18n();
68
const userStore = useUserStore();
79
</script>
810

@@ -12,21 +14,25 @@ const userStore = useUserStore();
1214
v-if="userStore.isLogin"
1315
class="text-primary-dark dark:text-ternary-light"
1416
>
15-
Hello, {{ userStore.userInfo?.username }}
17+
{{
18+
t('common.welcome', {
19+
name: userStore.userInfo?.username,
20+
})
21+
}}
1622
</p>
1723
<p class="text-primary-dark dark:text-ternary-light">
18-
Recommended IDE setup:
24+
{{ t('home.recommendIde') }}:
1925
<a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
2026
+
2127
<a href="https://github.com/johnsoncodehk/volar" target="_blank"
2228
>Volar</a
2329
>
2430
</p>
2531

26-
<p class="text-primary-dark dark:text-ternary-light">
27-
See <code class="dark:text-ternary-dark">README.md</code> for more
28-
information.
29-
</p>
32+
<p
33+
class="text-primary-dark dark:text-ternary-light"
34+
v-html="t('home.remarks')"
35+
></p>
3036
</template>
3137

3238
<style scoped>

‎src/components/LangSwitcher.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts" setup>
2+
import { useI18n } from 'vue-i18n';
3+
4+
const { t, availableLocales, locale } = useI18n();
5+
6+
function toggleLocales() {
7+
// change to some real logic
8+
const locales = availableLocales;
9+
locale.value =
10+
locales[(locales.indexOf(locale.value) + 1) % locales.length];
11+
}
12+
</script>
13+
14+
<template>
15+
<el-button :circle="true" @click.prevent="toggleLocales">
16+
<div i-carbon-language />
17+
</el-button>
18+
</template>

‎src/components/ServiceWorker.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ onBeforeMount(() => {
2727
</script>
2828
<template>
2929
<p class="sw-btns">
30-
<el-button @click="runWorker">Ping web worker</el-button>
30+
<el-button @click="runWorker">Ping Web Worker</el-button>
3131
&#160;&#160;
32-
<el-button @click="resetMessage">Reset message</el-button>
32+
<el-button @click="resetMessage">Reset Message</el-button>
3333
</p>
3434

3535
<p v-if="pong" class="sw-msg">

‎src/components/VueUse.vue

+63-21
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,74 @@
11
<script lang="ts" setup>
2-
import { useEyeDropper } from '@vueuse/core';
2+
import { useI18n } from 'vue-i18n';
3+
import { useColorMode, useCycleList } from '@vueuse/core';
34
4-
const { isSupported, open, sRGBHex } = useEyeDropper();
5+
const { t } = useI18n();
6+
const mode = useColorMode({
7+
// emitAuto: true,
8+
modes: {
9+
contrast: 'dark contrast',
10+
cafe: 'cafe',
11+
},
12+
});
13+
const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast', 'auto'], {
14+
initialValue: mode,
15+
});
516
</script>
617
<template>
7-
<section
8-
v-if="isSupported"
9-
class="vueuse-box p-5 text-primary-dark dark:text-ternary-light"
10-
>
11-
<h3 class="title font-bold">Vueuse Example</h3>
12-
<div>isSupported: {{ isSupported }}</div>
13-
<div>
14-
sRGBHex: <span :style="{ color: sRGBHex }">{{ sRGBHex }}</span>
15-
</div>
18+
<section class="vueuse-box p-5 text-primary-dark dark:text-ternary-light">
19+
<h3 class="title font-bold">
20+
VueUse {{ t('common.example') }}: ColorMode
21+
</h3>
22+
<el-button type="primary" @click="next()">
23+
<i
24+
v-if="mode === 'dark'"
25+
i-carbon-moon
26+
inline-block
27+
align-middle
28+
class="align-middle"
29+
/>
30+
<i
31+
v-if="mode === 'light'"
32+
i-carbon-sun
33+
inline-block
34+
align-middle
35+
class="align-middle"
36+
/>
37+
<i
38+
v-if="mode === 'cafe'"
39+
i-carbon-cafe
40+
inline-block
41+
align-middle
42+
class="align-middle"
43+
/>
44+
<i
45+
v-if="mode === 'contrast'"
46+
i-carbon-contrast
47+
inline-block
48+
align-middle
49+
class="align-middle"
50+
/>
51+
<i
52+
v-if="mode === 'auto'"
53+
i-carbon-laptop
54+
inline-block
55+
align-middle
56+
class="align-middle"
57+
/>
1658

17-
<div>
18-
<el-button :disabled="!isSupported" @click="() => open()">
19-
{{
20-
isSupported
21-
? 'Open Eye Dropper'
22-
: 'Not Supported by Your Browser'
23-
}}
24-
</el-button>
25-
</div>
59+
<span class="ml-2 capitalize">{{ mode }}</span>
60+
</el-button>
2661
</section>
2762
</template>
28-
<style lang="scss" scoped>
63+
<style lang="scss">
2964
.vueuse-box {
3065
margin: 20px auto;
3166
}
67+
68+
html.cafe {
69+
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
70+
}
71+
html.contrast {
72+
filter: contrast(2);
73+
}
3274
</style>

‎src/components/shared/Footer.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script lang="ts" setup>
22
import { ref } from 'vue';
3+
import { useI18n } from 'vue-i18n';
4+
5+
const { t } = useI18n();
36
47
const year = ref(new Date().getFullYear());
58
</script>
@@ -19,14 +22,14 @@ const year = ref(new Date().getFullYear());
1922
href="https://vitejs.dev/guide/features.html"
2023
target="_blank"
2124
>
22-
Vite Docs
25+
Vite {{ t('common.docs') }}
2326
</a>
2427
<span class="p-2"> | </span>
2528
<a
2629
class="link__item underline"
2730
href="https://v3.vuejs.org/"
2831
target="_blank"
29-
>Vue 3 Docs</a
32+
>Vue3 {{ t('common.docs') }}</a
3033
>
3134
</div>
3235
</template>

‎src/components/shared/Header.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<script lang="ts" setup>
2+
import { useI18n } from 'vue-i18n';
23
import LoginButton from '../LoginButton.vue';
34
import ThemeSwitcher from '../ThemeSwitcher.vue';
5+
import LangSwitcher from '../LangSwitcher.vue';
46
import Menu from '../Menu.vue';
7+
8+
const { t } = useI18n();
59
</script>
610
<template>
711
<nav class="header-nav flex flex-row justify-center items-center">
@@ -19,10 +23,11 @@ import Menu from '../Menu.vue';
1923
<h3
2024
class="title text-3xl font-medium text-primary-dark dark:text-ternary-light hidden sm:block"
2125
>
22-
Vue3 + TypeScript + Vite Template
26+
Vue3 + TypeScript + Vite {{ t('common.template') }}
2327
</h3>
2428
<div class="nav-right flex flex-row justify-between items-center">
2529
<LoginButton />
30+
<LangSwitcher class="switch-icon" />
2631
<ThemeSwitcher class="switch-icon" />
2732
</div>
2833
</nav>

‎src/i18n/index.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createI18n } from 'vue-i18n';
2+
3+
// Import i18n resources
4+
// https://vitejs.dev/guide/features.html#glob-import
5+
//
6+
// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
7+
const messages = Object.fromEntries(
8+
Object.entries(
9+
import.meta.glob<{ default: any }>('../../locales/*.y(a)?ml', {
10+
eager: true,
11+
}),
12+
).map(([key, value]) => {
13+
const yaml = key.endsWith('.yaml');
14+
return [key.slice(14, yaml ? -5 : -4), value.default];
15+
}),
16+
);
17+
18+
console.log('messages', messages);
19+
20+
const i18n = createI18n({
21+
legacy: false,
22+
locale: 'en',
23+
messages,
24+
});
25+
26+
export { i18n };

‎src/main.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import { createApp } from 'vue';
22
import ElementPlus from 'element-plus';
33

44
import App from './App.vue';
5-
import store from './store';
6-
import router from './router';
5+
import { store } from './store';
6+
import { router } from './router';
7+
import { i18n } from './i18n';
78
import { updateTheme } from './utils/theme';
89

10+
import 'uno.css';
911
import '@/assets/styles/index.scss';
1012
// If you want to use ElMessage, import it.
1113
import 'element-plus/theme-chalk/src/message.scss';
@@ -19,10 +21,11 @@ async function main() {
1921

2022
const app = createApp(App);
2123

22-
// 挂载插件
24+
// load plugins
2325
app.use(store);
2426
app.use(router);
2527
app.use(ElementPlus);
28+
app.use(i18n);
2629

2730
app.mount('#app');
2831

‎src/pages/Detail.vue

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts" setup>
2-
import { useUserStore } from '@/store/user';
2+
import { useI18n } from 'vue-i18n';
33
import { useRouter } from 'vue-router';
4+
import { useUserStore } from '@/store/user';
45
6+
const { t } = useI18n();
57
const router = useRouter();
68
79
const userStore = useUserStore();
@@ -12,8 +14,14 @@ function goBack() {
1214
</script>
1315

1416
<template>
15-
<h1 class="title">This is Detail Page, need login</h1>
16-
<p class="user-info">Wellcome, {{ userStore.userInfo?.username }}</p>
17+
<h1 class="title">{{ t('detail.loginTip') }}</h1>
18+
<p class="user-info">
19+
{{
20+
t('common.welcome', {
21+
name: userStore.userInfo?.username,
22+
})
23+
}}
24+
</p>
1725
<!-- <el-button @click="goBack">Back</el-button> -->
1826
</template>
1927

‎src/pages/Index.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script lang="ts" setup>
2+
import { useI18n } from 'vue-i18n';
23
import HelloWorld from '@/components/HelloWorld.vue';
34
import VueUse from '@/components/VueUse.vue';
5+
6+
const { t } = useI18n();
47
</script>
58

69
<template>
710
<img alt="Vue logo" src="@/assets/images/logo.png" class="w-30" />
8-
<HelloWorld
9-
msg="Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀"
10-
/>
11+
<HelloWorld :msg="t('common.hello')" />
1112
<VueUse />
1213
</template>
1314

‎src/router/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ router.beforeEach(async (to, from) => {
3636
}
3737
});
3838

39-
export default router;
39+
export { router };

‎src/store/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import { createPinia } from 'pinia';
22

33
const store = createPinia();
44

5-
export default store;
5+
export { store };

‎src/types/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import type { App } from 'vue';
2+
export type UserModule = (app: App) => void;

‎tailwind.config.js

-28
This file was deleted.

‎tsconfig.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@
3030
]
3131
},
3232
"types": [
33-
"element-plus/global"
33+
"element-plus/global",
34+
"vite/client",
35+
"vue/ref-macros",
36+
"vite-plugin-pwa/client",
37+
"unplugin-vue-macros/macros-global"
3438
]
3539
},
3640
"include": [

‎unocss.config.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {
2+
defineConfig,
3+
presetAttributify,
4+
presetIcons,
5+
presetTypography,
6+
presetUno,
7+
presetWebFonts,
8+
transformerDirectives,
9+
transformerVariantGroup,
10+
} from 'unocss';
11+
12+
export default defineConfig({
13+
shortcuts: [
14+
[
15+
'btn',
16+
'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
17+
],
18+
[
19+
'icon-btn',
20+
'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
21+
],
22+
],
23+
presets: [
24+
presetUno(),
25+
presetAttributify(),
26+
presetIcons({
27+
scale: 1.2,
28+
warn: true,
29+
}),
30+
presetTypography(),
31+
presetWebFonts({
32+
fonts: {
33+
sans: 'DM Sans',
34+
serif: 'DM Serif Display',
35+
mono: 'DM Mono',
36+
},
37+
}),
38+
],
39+
transformers: [transformerDirectives(), transformerVariantGroup()],
40+
});

‎vite.config.ts

+29-9
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import * as path from 'path';
77
import { ManifestOptions, VitePWA, VitePWAOptions } from 'vite-plugin-pwa';
88
import replace from '@rollup/plugin-replace';
99
import { createHtmlPlugin } from 'vite-plugin-html';
10+
import VueI18n from '@intlify/unplugin-vue-i18n/vite';
11+
import Unocss from 'unocss/vite';
1012

1113
const pwaOptions: Partial<VitePWAOptions> = {
1214
mode: 'development',
@@ -43,10 +45,6 @@ const pwaOptions: Partial<VitePWAOptions> = {
4345
},
4446
};
4547

46-
const replaceOptions = {
47-
__DATE__: new Date().toISOString(),
48-
__RELOAD_SW__: '',
49-
};
5048
const claims = process.env.CLAIMS === 'true';
5149
const reload = process.env.RELOAD_SW === 'true';
5250

@@ -61,10 +59,6 @@ if (process.env.SW === 'true') {
6159

6260
if (claims) pwaOptions.registerType = 'autoUpdate';
6361

64-
if (reload) {
65-
replaceOptions.__RELOAD_SW__ = 'true';
66-
}
67-
6862
// https://vitejs.dev/config/
6963
export default defineConfig({
7064
resolve: {
@@ -93,13 +87,39 @@ export default defineConfig({
9387
},
9488
}),
9589
AutoImport({
90+
imports: [
91+
'vue',
92+
'vue-router',
93+
'vue-i18n',
94+
'vue/macros',
95+
'@vueuse/head',
96+
'@vueuse/core',
97+
],
9698
resolvers: [ElementPlusResolver()],
9799
}),
98100
Components({
99101
resolvers: [ElementPlusResolver()],
100102
}),
103+
104+
// https://github.com/antfu/unocss
105+
// see unocss.config.ts for config
106+
Unocss(),
107+
101108
VitePWA(pwaOptions),
102-
replace(replaceOptions),
109+
110+
// https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
111+
VueI18n({
112+
runtimeOnly: true,
113+
compositionOnly: true,
114+
fullInstall: true,
115+
include: [path.resolve(__dirname, 'locales/**')],
116+
}),
117+
118+
replace({
119+
preventAssignment: true,
120+
__DATE__: new Date().toISOString(),
121+
__RELOAD_SW__: reload ? 'true' : '',
122+
}),
103123
],
104124
server: {
105125
port: 8080,

1 commit comments

Comments
 (1)

vercel[bot] commented on Mar 14, 2023

@vercel[bot]
vercel[bot]
on Mar 14, 2023

Successfully deployed to the following URLs:

vue-ts-starter – ./

vue-ts-starter-git-main-yugasun.vercel.app
vue-ts-starter-yugasun.vercel.app
vue-ts-starter.vercel.app

Please sign in to comment.