forked from extern/homer
Migrate to VueJS 3
This commit is contained in:
Bastien Wirtz
parent
95c589ba71
commit
cbbed6346a
@ -1,3 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal 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,
|
||||||
|
},
|
||||||
|
};
|
||||||
15
.eslintrc.js
15
.eslintrc.js
@ -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",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: ["@vue/cli-plugin-babel/preset"],
|
|
||||||
};
|
|
||||||
13
index.html
Normal file
13
index.html
Normal 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>
|
||||||
33
package.json
33
package.json
@ -2,34 +2,29 @@
|
|||||||
"name": "homer",
|
"name": "homer",
|
||||||
"version": "21.09.1",
|
"version": "21.09.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"dev": "vite",
|
||||||
"build": "vue-cli-service build",
|
"build": "vite build",
|
||||||
"lint": "vue-cli-service lint"
|
"preview": "vite preview --port 5050",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
"core-js": "^3.22.7",
|
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"lodash.merge": "^4.6.2",
|
"lodash.merge": "^4.6.2",
|
||||||
"register-service-worker": "^1.7.2",
|
"register-service-worker": "^1.7.2",
|
||||||
"vue": "^2.6.14"
|
"vue": "^3.2.33"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.19",
|
"@rushstack/eslint-patch": "^1.1.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.19",
|
"@vitejs/plugin-vue": "^2.3.1",
|
||||||
"@vue/cli-plugin-pwa": "~4.5.19",
|
"@vue/cli-plugin-pwa": "^5.0.4",
|
||||||
"@vue/cli-service": "~4.5.19",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"eslint": "^8.5.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"eslint-plugin-vue": "^8.2.0",
|
||||||
"eslint": "^6.7.2",
|
"prettier": "^2.5.1",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"sass": "^1.52.2",
|
||||||
"eslint-plugin-vue": "^6.2.2",
|
"vite": "^2.9.9"
|
||||||
"prettier": "^2.2.1",
|
|
||||||
"raw-loader": "^4.0.2",
|
|
||||||
"sass": "^1.26.5",
|
|
||||||
"sass-loader": "^8.0.2",
|
|
||||||
"vue-template-compiler": "^2.6.12"
|
|
||||||
},
|
},
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -140,8 +140,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const jsyaml = require("js-yaml");
|
import jsyaml from "js-yaml";
|
||||||
const merge = require("lodash.merge");
|
import merge from "lodash.merge";
|
||||||
|
|
||||||
import Navbar from "./components/Navbar.vue";
|
import Navbar from "./components/Navbar.vue";
|
||||||
import GetStarted from "./components/GetStarted.vue";
|
import GetStarted from "./components/GetStarted.vue";
|
||||||
@ -153,7 +153,7 @@ import SettingToggle from "./components/SettingToggle.vue";
|
|||||||
import DarkMode from "./components/DarkMode.vue";
|
import DarkMode from "./components/DarkMode.vue";
|
||||||
import DynamicTheme from "./components/DynamicTheme.vue";
|
import DynamicTheme from "./components/DynamicTheme.vue";
|
||||||
|
|
||||||
import defaultConfig from "./assets/defaults.yml";
|
import defaultConfig from "./assets/defaults.yml?raw";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@import "./webfonts/webfonts.scss";
|
@import "./webfonts/webfonts.scss";
|
||||||
|
|
||||||
@import "bulma";
|
@import "../../node_modules/bulma/bulma";
|
||||||
|
|
||||||
// Themes import
|
// Themes import
|
||||||
@import "./themes/sui.scss";
|
@import "./themes/sui.scss";
|
||||||
|
|||||||
@ -75,7 +75,7 @@ export default {
|
|||||||
this.$emit("input", value.toLowerCase());
|
this.$emit("input", value.toLowerCase());
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeUnmount() {
|
||||||
document.removeEventListener("keydown", this._keyListener);
|
document.removeEventListener("keydown", this._keyListener);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<component v-bind:is="component" :item="item" :proxy="proxy"></component>
|
<component :is="component" :item="item" :proxy="proxy"></component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { defineAsyncComponent } from "vue";
|
||||||
import Generic from "./services/Generic.vue";
|
import Generic from "./services/Generic.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -17,7 +18,7 @@ export default {
|
|||||||
if (type === "Generic") {
|
if (type === "Generic") {
|
||||||
return Generic;
|
return Generic;
|
||||||
}
|
}
|
||||||
return () => import(`./services/${type}.vue`);
|
return defineAsyncComponent(() => import(`./services/${type}.vue`));
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
16
src/main.js
16
src/main.js
@ -1,19 +1,13 @@
|
|||||||
import Vue from "vue";
|
import { createApp, h } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import "./registerServiceWorker";
|
|
||||||
|
|
||||||
import "@fortawesome/fontawesome-free/css/all.css";
|
import "@fortawesome/fontawesome-free/css/all.css";
|
||||||
|
|
||||||
import "./assets/app.scss";
|
import "./assets/app.scss";
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
const app = createApp(App);
|
||||||
|
|
||||||
Vue.component("DynamicStyle", {
|
app.component("DynamicStyle", (_props, context) => {
|
||||||
render: function (createElement) {
|
return h("style", {}, context.slots);
|
||||||
return createElement("style", this.$slots.default);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
new Vue({
|
app.mount("#app");
|
||||||
render: (h) => h(App),
|
|
||||||
}).$mount("#app");
|
|
||||||
|
|||||||
15
vite.config.js
Normal file
15
vite.config.js
Normal 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)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user