➕ merge pull request #47 from devmount/46-vite

Vite
devmount · Apr 26, 2023 · 0695dd1 · 0695dd1
2 parents 2948a18 + 55cb15f
commit 0695dd1
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 6,482 deletions.
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,16 +4,17 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
     <title>You Can Quit!</title>
     <meta name="description" content="Track your progress and get encouraged on your way of quitting a bad habit.">
   </head>
   <body>
     <noscript>
       This is a tool to track your progress and get encouraged on your way of quitting a bad habit.<br>
-      <strong>We're sorry but you-can-quit doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <!-- built files -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -8,8 +8,9 @@
     "url": "https://devmount.de"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "browser": "./dist/index.html",
   "dependencies": {
@@ -24,38 +25,8 @@
     "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^5.0.0-beta.3",
-    "@vue/cli-plugin-pwa": "^5.0.0-beta.3",
-    "@vue/cli-service": "^5.0.0-beta.3",
-    "vue-template-compiler": "^2.6.12"
-  },
-  "babel": {
-    "presets": [
-      "@vue/cli-plugin-babel/preset"
-    ]
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {
-      "vue/require-v-for-key": "off",
-      "vue/no-unused-vars": "warn",
-      "no-unused-vars": "warn"
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    "@vitejs/plugin-vue": "^4.2.1",
+    "vite": "^4.3.2"
   },
   "browserslist": [
     "> 1%",

diff --git a/src/App.vue b/src/App.vue
@@ -75,21 +75,21 @@
 </template>
 
 <script setup>
-import { ref, reactive, inject, onMounted, computed } from 'vue';
 import { notify } from '@kyvg/vue3-notification';
+import { ref, reactive, inject, onMounted, computed } from 'vue';
 import { useI18n } from "vue-i18n";
 
 // get indexed db
 import db from '@/database';
 
 // get components
-import MonthNavigation from '@/components/MonthNavigation.vue';
+import About from '@/components/About.vue';
+import Administration from '@/components/Administration.vue';
+import Info from '@/components/Info.vue';
 import Month from '@/components/Month.vue';
-import YearNavigation from '@/components/YearNavigation.vue';
+import MonthNavigation from '@/components/MonthNavigation.vue';
 import Year from '@/components/Year.vue';
-import Info from '@/components/Info.vue';
-import Administration from '@/components/Administration.vue';
-import About from '@/components/About.vue';
+import YearNavigation from '@/components/YearNavigation.vue';
 
 const { t, locale } = useI18n();
 const version = inject('version');

diff --git a/src/components/Info.vue b/src/components/Info.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="info">
-  <Stats :status-data="statusData" />
-  <Achievements :status-data="statusData" />
-  <Legend />
+  <stats :status-data="statusData" />
+  <achievements :status-data="statusData" />
+  <legend />
 </div>
 </template>
 
 <script setup>
-import Legend from './info/Legend.vue';
-import Stats from './info/Stats.vue';
-import Achievements from './info/Achievements.vue';
+import Achievements from '@/components/info/Achievements.vue';
+import Legend from '@/components/info/Legend.vue';
+import Stats from '@/components/info/Stats.vue';
 
 defineProps({
   statusData: Object,

diff --git a/src/main.js b/src/main.js
@@ -108,23 +108,28 @@ app.mixin({
 })
 
 // Vue i18n
+import de from '@/locales/de.json';
+import en from '@/locales/en.json';
+import fr from '@/locales/fr.json';
+import it from '@/locales/it.json';
+import ptbr from '@/locales/pt-br.json';
 import { createI18n } from 'vue-i18n';
 const i18n = createI18n({
   locale: navigator.language || navigator.userLanguage,
   fallbackLocale: 'en',
   legacy: false,
   messages: {
-    'en': require('./locales/en.json'),
-    'de': require('./locales/de.json'),
-    'fr': require('./locales/fr.json'),
-    'it': require('./locales/it.json'),
-    'pt-br': require('./locales/pt-br.json'),
+    'de': de,
+    'en': en,
+    'fr': fr,
+    'it': it,
+    'pt-br': ptbr,
   }
 });
 app.use(i18n);
 
 // set global properties
-app.provide('version', process.env.VUE_APP_VERSION);
+app.provide('version', APP_VERSION);
 
 // ready? let's go!
 app.mount('#app');
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -2,8 +2,8 @@
 
 import { register } from 'register-service-worker'
 
-if (process.env.NODE_ENV === 'production') {
-	register(`${process.env.BASE_URL}service-worker.js`, {
+if (import.meta.env.NODE_ENV === 'production') {
+	register(`${import.meta.env.BASE_URL}service-worker.js`, {
 		ready () {
 			console.log(
 				'App is being served from cache by a service worker.\n' +

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+const path = require("path");
+
+export default defineConfig({
+	plugins: [vue()],
+	define: {
+		APP_VERSION: JSON.stringify(process.env.npm_package_version),
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
+});
diff --git a/vue.config.js b/vue.config.js