verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

Updated Vue component to class-style component

This commit is contained in:
Joan Sanchez 2022-02-24 11:04:35 +01:00
parent 8c5d968eb2
commit 6d457e9891
3 changed files with 52 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@quasar/extras": "^1.0.0",
"axios": "^0.26.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^3.0.0",
@ -4365,6 +4366,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"node_modules/axios": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
"integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
"dependencies": {
"follow-redirects": "^1.14.8"
}
},
"node_modules/babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@ -9039,7 +9048,6 @@
"version": "1.14.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true,
"engines": {
"node": ">=4.0"
},
@ -23259,7 +23267,8 @@
"version": "4.5.15",
"resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
"integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
"dev": true
"dev": true,
"requires": {}
},
"@vue/cli-service": {
"version": "4.5.15",
@ -23494,7 +23503,8 @@
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
"integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
"dev": true
"dev": true,
"requires": {}
},
"@vue/reactivity": {
"version": "3.2.31",
@ -23553,7 +23563,8 @@
"version": "2.0.0-rc.17",
"resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.0.0-rc.17.tgz",
"integrity": "sha512-7LHZKsFRV/HqDoMVY+cJamFzgHgsrmQFalROHC5FMWrzPzd+utG5e11krj1tVsnxYufGA2ABShX4nlcHXED+zQ==",
"dev": true
"dev": true,
"requires": {}
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
@ -23804,7 +23815,8 @@
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"dev": true
"dev": true,
"requires": {}
},
"acorn-walk": {
"version": "7.2.0",
@ -23834,13 +23846,15 @@
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
"dev": true
"dev": true,
"requires": {}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
"dev": true,
"requires": {}
},
"alphanum-sort": {
"version": "1.0.2",
@ -24113,6 +24127,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"axios": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
"integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
"requires": {
"follow-redirects": "^1.14.8"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@ -24176,7 +24198,8 @@
"version": "7.0.0-bridge.0",
"resolved": "https://registry.npmmirror.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
"integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
"dev": true
"dev": true,
"requires": {}
},
"babel-jest": {
"version": "24.9.0",
@ -28029,8 +28052,7 @@
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"for-in": {
"version": "1.0.2",
@ -30105,7 +30127,8 @@
"version": "7.5.7",
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.7.tgz",
"integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
"dev": true
"dev": true,
"requires": {}
}
}
},
@ -30255,7 +30278,8 @@
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
"dev": true
"dev": true,
"requires": {}
},
"jest-regex-util": {
"version": "24.9.0",
@ -36298,7 +36322,8 @@
"vue-class-component": {
"version": "8.0.0-rc.1",
"resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ=="
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
"requires": {}
},
"vue-cli-plugin-quasar": {
"version": "4.0.4",

1
package.json
View File

@ -11,6 +11,7 @@
},
"dependencies": {
"@quasar/extras": "^1.0.0",
"axios": "^0.26.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^3.0.0",

118
src/App.vue
View File

@ -1,114 +1,22 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="glossy">
<q-toolbar>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
icon="menu"
/>
<q-toolbar-title> Quasar App </q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-grey-2">
<q-list>
<q-item-label header>Essential Links</q-item-label>
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
<q-item-section avatar>
<q-icon name="school" />
</q-item-section>
<q-item-section>
<q-item-label>Docs</q-item-label>
<q-item-label caption>quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
tag="a"
target="_blank"
href="https://github.com/quasarframework/"
>
<q-item-section avatar>
<q-icon name="code" />
</q-item-section>
<q-item-section>
<q-item-label>Github</q-item-label>
<q-item-label caption>github.com/quasarframework</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
tag="a"
target="_blank"
href="https://chat.quasar.dev"
>
<q-item-section avatar>
<q-icon name="chat" />
</q-item-section>
<q-item-section>
<q-item-label>Discord Chat Channel</q-item-label>
<q-item-label caption>chat.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
tag="a"
target="_blank"
href="https://forum.quasar.dev"
>
<q-item-section avatar>
<q-icon name="forum" />
</q-item-section>
<q-item-section>
<q-item-label>Forum</q-item-label>
<q-item-label caption>forum.quasar.dev</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
tag="a"
target="_blank"
href="https://twitter.com/quasarframework"
>
<q-item-section avatar>
<q-icon name="rss_feed" />
</q-item-section>
<q-item-section>
<q-item-label>Twitter</q-item-label>
<q-item-label caption>@quasarframework</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<HelloWorld />
</q-page-container>
</q-layout>
{{ msg }}
</template>
<script>
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
<script lang="ts">
import { Options, Vue } from "vue-class-component";
export default {
name: "LayoutDefault",
components: {
HelloWorld,
@Options({
props: {
msg: String,
},
})
export default class App extends Vue {
msg?: string;
setup() {
data(): Record<string, unknown> {
return {
leftDrawerOpen: ref(false),
msg: "Hello Salix!",
};
},
};
}
}
</script>