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",
|
||||
"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"
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
<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",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@import "./webfonts/webfonts.scss";
|
||||
|
||||
@import "bulma";
|
||||
@import "../../node_modules/bulma/bulma";
|
||||
|
||||
// Themes import
|
||||
@import "./themes/sui.scss";
|
||||
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
this.$emit("input", value.toLowerCase());
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
document.removeEventListener("keydown", this._keyListener);
|
||||
},
|
||||
};
|
||||
|
||||
@ -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`));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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 "./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
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