Migrate to VueJS 3

This commit is contained in:
Bastien Wirtz 2022-06-04 22:40:48 +02:00
parent 95c589ba71
commit cbbed6346a
15 changed files with 2672 additions and 7394 deletions

View File

@ -1,3 +0,0 @@
> 1%
last 2 versions
not dead

14
.eslintrc.cjs Normal file
View File

@ -0,0 +1,14 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-prettier",
],
env: {
"vue/setup-compiler-macros": true,
},
};

View File

@ -1,15 +0,0 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"vue/require-v-for-key": "off",
},
};

View File

@ -1,3 +0,0 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@ -2,34 +2,29 @@
"name": "homer",
"version": "21.09.1",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
"core-js": "^3.22.7",
"js-yaml": "^4.1.0",
"lodash.merge": "^4.6.2",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14"
"vue": "^3.2.33"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.19",
"@vue/cli-plugin-eslint": "~4.5.19",
"@vue/cli-plugin-pwa": "~4.5.19",
"@vue/cli-service": "~4.5.19",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"raw-loader": "^4.0.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
"@rushstack/eslint-patch": "^1.1.0",
"@vitejs/plugin-vue": "^2.3.1",
"@vue/cli-plugin-pwa": "^5.0.4",
"@vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"prettier": "^2.5.1",
"sass": "^1.52.2",
"vite": "^2.9.9"
},
"license": "Apache-2.0"
}

View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta name="robots" content="noindex">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@ -140,8 +140,8 @@
</template>
<script>
const jsyaml = require("js-yaml");
const merge = require("lodash.merge");
import jsyaml from "js-yaml";
import merge from "lodash.merge";
import Navbar from "./components/Navbar.vue";
import GetStarted from "./components/GetStarted.vue";
@ -153,7 +153,7 @@ import SettingToggle from "./components/SettingToggle.vue";
import DarkMode from "./components/DarkMode.vue";
import DynamicTheme from "./components/DynamicTheme.vue";
import defaultConfig from "./assets/defaults.yml";
import defaultConfig from "./assets/defaults.yml?raw";
export default {
name: "App",

View File

@ -2,7 +2,7 @@
@import "./webfonts/webfonts.scss";
@import "bulma";
@import "../../node_modules/bulma/bulma";
// Themes import
@import "./themes/sui.scss";

View File

@ -75,7 +75,7 @@ export default {
this.$emit("input", value.toLowerCase());
},
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener("keydown", this._keyListener);
},
};

View File

@ -1,8 +1,9 @@
<template>
<component v-bind:is="component" :item="item" :proxy="proxy"></component>
<component :is="component" :item="item" :proxy="proxy"></component>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Generic from "./services/Generic.vue";
export default {
@ -17,7 +18,7 @@ export default {
if (type === "Generic") {
return Generic;
}
return () => import(`./services/${type}.vue`);
return defineAsyncComponent(() => import(`./services/${type}.vue`));
},
},
};

View File

@ -1,19 +1,13 @@
import Vue from "vue";
import { createApp, h } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import "@fortawesome/fontawesome-free/css/all.css";
import "./assets/app.scss";
Vue.config.productionTip = false;
const app = createApp(App);
Vue.component("DynamicStyle", {
render: function (createElement) {
return createElement("style", this.$slots.default);
},
app.component("DynamicStyle", (_props, context) => {
return h("style", {}, context.slots);
});
new Vue({
render: (h) => h(App),
}).$mount("#app");
app.mount("#app");

15
vite.config.js Normal file
View File

@ -0,0 +1,15 @@
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});

View File

@ -1,32 +0,0 @@
const manifestOptions = require("./public/assets/manifest.json");
module.exports = {
chainWebpack: (config) => {
config.module
.rule("yaml")
.test(/\.ya?ml$/)
.use("raw-loader")
.loader("raw-loader")
.end();
},
publicPath: "",
pwa: {
manifestPath: "assets/manifest.json",
manifestCrossorigin: "use-credentials",
appleMobileWebAppStatusBarStyle: "black",
appleMobileWebAppCapable: "yes",
name: manifestOptions.name,
themeColor: manifestOptions.theme_color,
manifestOptions,
iconPaths: {
favicon32: "assets/icons/favicon-32x32.png",
favicon16: "assets/icons/favicon-16x16.png",
appleTouchIcon: "assets/icons/icon-maskable.png",
maskIcon: "assets/icons/safari-pinned-tab.svg",
msTileImage: "assets/icons/icon-any.png",
},
},
devServer: {
disableHostCheck: true,
},
};

9889
yarn.lock

File diff suppressed because it is too large Load Diff