Migrate to Vite from webpack.

index.html

@@ -4,18 +4,13 @@
         <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" />
-        <link
+        <link title="Piped" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml" />
-            title="Piped"
+        <title>Piped</title>
-            type="application/opensearchdescription+xml"
-            rel="search"
-            href="<%= BASE_URL %>opensearch.xml"
-        />
-        <title><%= htmlWebpackPlugin.options.title %></title>
         <meta property="og:title" content="Piped" />
         <meta property="og:type" content="website" />
-        <meta property="og:image" content="<%= BASE_URL %>img/icons/favicon-32x32.png" />
+        <meta property="og:image" content="/img/icons/favicon-32x32.png" />
-        <meta property="og:url" content="<%= BASE_URL %>" />
+        <meta property="og:url" content="/" />
         <meta
             property="og:description"
             content="An alternative privacy-friendly YouTube frontend which is efficient by design."
@@ -24,10 +19,11 @@
 
     <noscript>
         <strong style="color: #fff"
-            >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+            >We're sorry but Piped doesn't work properly without JavaScript enabled. Please enable it to
-            Please enable it to continue.</strong
+            continue.</strong
         >
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
 </html>

package.json

@@ -3,9 +3,9 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve",
+        "serve": "vite",
-        "build": "vue-cli-service build",
+        "build": "vite build",
-        "lint": "vue-cli-service lint"
+        "preview": "vite preview"
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -13,7 +13,6 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^3.0.0-5",
         "core-js": "3.20.1",
-        "css-loader": "^6.5.1",
         "dompurify": "^2.3.4",
         "hotkeys-js": "^3.8.7",
         "javascript-time-ago": "^2.3.10",
@@ -27,19 +26,16 @@
         "xml-js": "^1.6.11"
     },
     "devDependencies": {
-        "@intlify/vue-i18n-loader": "^4.1.0",
+        "@intlify/vite-plugin-vue-i18n": "^3.2.1",
-        "@vue/cli-plugin-babel": "^4.5.15",
+        "@vitejs/plugin-vue": "^2.0.1",
-        "@vue/cli-plugin-eslint": "^4.5.15",
-        "@vue/cli-plugin-pwa": "^4.5.15",
-        "@vue/cli-service": "^4.5.15",
         "@vue/compiler-sfc": "3.2.26",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",
-        "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^7.20.0",
-        "vue-cli-plugin-i18n": "^2.3.1",
+        "prettier": "^2.5.1",
-        "vue-cli-plugin-windicss": "~1.1.2"
+        "vite": "^2.7.8",
+        "vite-plugin-windicss": "^1.6.1"
     },
     "eslintConfig": {
         "root": true,

src/App.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Navigation from "@/components/Navigation";
+import Navigation from "@/components/Navigation.vue";
 export default {
     components: {
         Navigation,
@@ -67,7 +67,7 @@ export default {
             }
             if (window.i18n.global.locale.value !== locale) {
                 if (!window.i18n.global.availableLocales.includes(locale)) {
-                    const messages = await import("@/locales/" + locale + ".json").then(module => module.default);
+                    const messages = await import(`./locales/${locale}.json`).then(module => module.default);
                     window.i18n.global.setLocaleMessage(locale, messages);
                 }
                 window.i18n.global.locale.value = locale;
@@ -88,7 +88,6 @@ b {
 
 ::-webkit-scrollbar {
     background-color: #15191a;
-    color: #c5bcae;
 }
 
 ::-webkit-scrollbar-thumb {

src/components/Navigation.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import SearchSuggestions from "@/components/SearchSuggestions";
+import SearchSuggestions from "@/components/SearchSuggestions.vue";
 
 export default {
     components: {

src/components/Preferences.vue

@@ -341,10 +341,8 @@ export default {
             this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
             if (this.selectedLanguage != "en") {
                 try {
-                    this.CountryMap = await import("@/utils/CountryMaps/" + this.selectedLanguage + ".json").then(
+                    this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
-                        val => {
+                        val => val.default,
-                            this.countryMap = val;
-                        },
                     );
                 } catch (e) {
                     console.error("Countries not translated into " + this.selectedLanguage);

src/components/VideoItem.vue

@@ -13,11 +13,7 @@
 
             <div>
                 <p
-                    style="
+                    style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                        display: -webkit-box;
-                        -webkit-line-clamp: 2;
-                        -webkit-box-orient: vertical;
-                    "
                     class="my-2 overflow-hidden flex link"
                     :title="video.title"
                 >

src/main.js

@@ -36,7 +36,7 @@ library.add(
 
 // import("uikit/dist/css/uikit-core.css");
 
-import router from "@/router/router";
+import router from "@/router/router.js";
 import App from "./App.vue";
 
 import DOMPurify from "dompurify";

vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import WindiCSS from "vite-plugin-windicss";
+import vueI18n from "@intlify/vite-plugin-vue-i18n";
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        WindiCSS(),
+        vueI18n({
+            include: path.resolve(__dirname, "./src/locales/**"),
+        }),
+    ],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+});