surya/vue3-pinia-quasar-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
CharlieDigital
2022-01-15 11:00:39 -05:00
commit 830c3398f0
19 changed files with 1388 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

3
web/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["johnsoncodehk.volar"]
}

11
web/README.md Normal file
View File

@@ -0,0 +1,11 @@
# Vue 3 + Typescript + Vite
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
## Type Support For `.vue` Imports in TS
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

13
web/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.ts"></script>
</body>
</html>

24
web/package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "vue-quasar-vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@quasar/extras": "^1.12.3",
"pinia": "^2.0.9",
"quasar": "^2.4.10",
"vue": "^3.2.25",
"vue-router": "4"
},
"devDependencies": {
"@quasar/vite-plugin": "^1.0.4",
"@vitejs/plugin-vue": "^2.0.0",
"sass": "1.32.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}

BIN
web/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
web/src/App.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>

BIN
web/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

53
web/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
See
<code>README.md</code> for more information.
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
</style>

8
web/src/env.d.ts vendored Normal file
View File

@@ -0,0 +1,8 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}

62
web/src/layouts/MainLayout.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="constrained bg-grey-2">
<QLayout view="hHR lpr lfr">
<!--// Header //-->
<QHeader bordered class="bg-white text-primary">
<QToolbar>
<QBtn
flat
round
dense
icon="mdi-menu"
class="q-mr-sm"
@click="leftDrawerOpen = !leftDrawerOpen"
/>
<QToolbarTitle>Vue3 + Vite + Quasar</QToolbarTitle>
</QToolbar>
</QHeader>
<!--// Left drawer //-->
<QDrawer
show-if-above
v-model="leftDrawerOpen"
@before-hide="leftDrawerOpen = false"
content-class="bg-white"
:width="320"
>
Left Menu
</QDrawer>
<!--// Main content //-->
<QPageContainer class="bg-grey-2">
<router-view />
</QPageContainer>
</QLayout>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const leftDrawerOpen = ref(true);
</script>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");
.constrained {
width: 100%;
height: 100%;
}
.constrained .q-layout,
.constrained .q-header,
.constrained .q-footer {
margin: 0 auto;
/* max-width: 1245px !important; */
}
.nav-btn {
min-width: 90px;
}
</style>

48
web/src/main.ts Normal file
View File

@@ -0,0 +1,48 @@
// FILE: main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import VueRouter from 'vue-router'
import { Quasar } from 'quasar'
import quasarIconSet from 'quasar/icon-set/mdi-v6'
// Import icon libraries
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
import '@quasar/extras/mdi-v6/mdi-v6.css'
// A few examples for animations from Animate.css:
// import @quasar/extras/animate/fadeIn.css
// import @quasar/extras/animate/fadeOut.css
// Import Quasar css
import 'quasar/src/css/index.sass'
// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
import router from './router'
const myApp = createApp(App)
myApp.use(Quasar, {
plugins: {}, // import Quasar plugins and add here
iconSet: quasarIconSet,
/*
config: {
brand: {
// primary: '#e46262',
// ... or all other brand colors
},
notify: {...}, // default set of options for Notify Quasar plugin
loading: {...}, // default set of options for Loading Quasar plugin
loadingBar: { ... }, // settings for LoadingBar Quasar plugin
// ..and many more (check Installation card on each Quasar component/directive/plugin)
}
*/
})
myApp.use(createPinia());
myApp.use(router);
// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

10
web/src/quasar-variables.sass Normal file
View File

@@ -0,0 +1,10 @@
$primary : #1976D2
$secondary : #26A69A
$accent : #9C27B0
$dark : #1D1D1D
$positive : #21BA45
$negative : #C10015
$info : #31CCEC
$warning : #F2C037

12
web/src/router/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import {
createRouter,
createWebHashHistory,
} from 'vue-router';
import routes from './routes';
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
export default router;

16
web/src/router/routes.ts Normal file
View File

@@ -0,0 +1,16 @@
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] =
[{
path: '/',
component: () => import('../layouts/MainLayout.vue'),
children: [
{
name: 'Home',
path: '',
component: () => import('../views/SampleView.vue')
}
]
}];
export default routes;

10
web/src/views/SampleView.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from '../components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

15
web/tsconfig.json Normal file
View File

@@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

19
web/vite.config.ts Normal file
View File

@@ -0,0 +1,19 @@
// FILE: vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: { transformAssetUrls }
}),
quasar({
autoImportComponentCase: 'pascal',
sassVariables: 'src/quasar-variables.sass'
})
]
})

1062
web/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff