├── layouts
    ├── default.vue
    └── complicated.vue
├── tsconfig.json
├── .gitignore
├── app.vue
├── assets
    ├── styles
    │   ├── quasar.sass
    │   └── quasar-variables.sass
    └── logo.svg
├── .vscode
    └── settings.json
├── plugins
    ├── quasar.ts
    └── fake-dom.server.ts
├── pages
    ├── index.vue
    └── complicated.vue
├── nuxt.config.ts
├── README.md
├── package.json
└── components
    ├── HelloWorld.vue
    └── LeftDrawer.vue


/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <slot />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | .env


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>


--------------------------------------------------------------------------------
/assets/styles/quasar.sass:
--------------------------------------------------------------------------------
1 | @import './quasar-variables.sass'
2 | @import 'quasar/src/css/index.sass'


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "yaml.schemas": {
3 |         "kubernetes": "*.kube.yaml",
4 |         "https://json.schemastore.org/github-workflow.json": "file:///Users/alex/Desktop/nuxt-app/.github/workflows/deploy.yml"
5 |     }
6 | }


--------------------------------------------------------------------------------
/plugins/quasar.ts:
--------------------------------------------------------------------------------
 1 | import * as components from 'quasar'
 2 | 
 3 | export default defineNuxtPlugin((nuxtApp) => {
 4 | 
 5 |   nuxtApp.vueApp.use(components.Quasar, {
 6 |     plugins: {},
 7 |     components,
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HelloWorld />
 3 | </template>
 4 | <script setup>
 5 | definePageMeta({
 6 |   layout: "default",
 7 |   title: "Default Page",
 8 |   description: "This is a default page",
 9 | });
10 | </script>
11 | 


--------------------------------------------------------------------------------
/assets/styles/quasar-variables.sass:
--------------------------------------------------------------------------------
 1 | $primary   : #1976D2
 2 | $secondary : #26A69A
 3 | $accent    : #9C27B0
 4 | 
 5 | $dark      : #1D1D1D
 6 | 
 7 | $positive  : #21BA45
 8 | $negative  : #C10015
 9 | $info      : #31CCEC
10 | $warning   : #F2C037


--------------------------------------------------------------------------------
/pages/complicated.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <HelloWorld />
 3 | </template>
 4 | 
 5 | <script setup>
 6 | definePageMeta({
 7 |   layout: "complicated",
 8 |   title: "Complicated Page",
 9 |   description: "This is a complicated page",
10 | });
11 | </script>
12 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { quasar } from "@quasar/vite-plugin";
 2 | 
 3 | export default defineNuxtConfig({
 4 |   build: {
 5 |     transpile: ["quasar"],
 6 |   },
 7 |   css: [
 8 |     "@quasar/extras/roboto-font/roboto-font.css",
 9 |     "@quasar/extras/material-icons/material-icons.css",
10 |     "@quasar/extras/fontawesome-v6/fontawesome-v6.css",
11 |     "~/assets/styles/quasar.sass",
12 |   ],
13 |   vite: {
14 |     define: {
15 |       // "process.env.DEBUG": false,
16 |     },
17 |     plugins: [
18 |       quasar({
19 |         sassVariables: "assets/styles/quasar-variables.sass",
20 |       }),
21 |     ],
22 |   },
23 | });
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 + Quasar 2.10 - Starter Template
 2 | 
 3 | We recommend to look at the [documentation](https://v3.nuxtjs.org).
 4 | 
 5 | **Demo:** https://quasar-nuxt3-ssr.vercel.app/
 6 | 
 7 | ## Prerequisits
 8 | 
 9 | - NodeJS 16.x
10 | 
11 | ## Setup
12 | 
13 | Make sure to install the dependencies
14 | 
15 | ```bash
16 | yarn install
17 | ```
18 | 
19 | ## Development
20 | 
21 | Start the development server on http://localhost:3000
22 | 
23 | ```bash
24 | yarn dev
25 | ```
26 | 
27 | ## Production
28 | 
29 | Build the application for production:
30 | 
31 | ```bash
32 | yarn build
33 | ```
34 | 
35 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "start": "node .output/server/index.mjs",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare",
10 |     "test": "echo 'test'",
11 |     "lint": "echo 'lint'"
12 |   },
13 |   "engines": {
14 |     "node": "16"
15 |   },
16 |   "dependencies": {
17 |     "@quasar/extras": "^1.15.5",
18 |     "@vueuse/core": "^9.5.0",
19 |     "jsdom": "^20.0.2",
20 |     "quasar": "^2.10.2"
21 |   },
22 |   "devDependencies": {
23 |     "@quasar/vite-plugin": "^1.2.3",
24 |     "@types/jsdom": "^20.0.1",
25 |     "nuxt": "3.0.0-rc.14",
26 |     "sass": "1.32.12"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/plugins/fake-dom.server.ts:
--------------------------------------------------------------------------------
 1 | import { JSDOM } from "jsdom";
 2 | 
 3 | const dom = new JSDOM(
 4 |   "<!DOCTYPE html><head></head><body><h1>FAKE DOM</h1></body></html>",
 5 |   {
 6 |     url: "https://example.org/",
 7 |     referrer: "https://example.com/",
 8 |     contentType: "text/html",
 9 |     includeNodeLocations: true,
10 |     storageQuota: 10000000,
11 |   }
12 | );
13 | 
14 | const { XMLHttpRequest } = dom.window;
15 | global.XMLHttpRequest = XMLHttpRequest;
16 | // @ts-ignore
17 | global.window = dom.window;
18 | global.navigator = dom.window.navigator;
19 | global.document = dom.window.document;
20 | // @ts-ignore
21 | global.FileList = dom.window.FileList;
22 | global.File = dom.window.File;
23 | global.getComputedStyle = dom.window.getComputedStyle;
24 | 
25 | export default defineNuxtPlugin((_nuxtApp): void => {});
26 | 


--------------------------------------------------------------------------------
/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-center">
 3 |     <q-card>
 4 |       <q-card-section>
 5 |         <img
 6 |           alt="Quasar logo"
 7 |           src="~/assets/logo.svg"
 8 |           style="width: 200px; height: 200px"
 9 |         />
10 |       </q-card-section>
11 |       <q-card-section>
12 |         <p class="text-center">@NUXT3 RC13: vue@{{ version }}</p>
13 |         <div class="flex flex-center">
14 |           <q-btn @click="click">Switch Layout</q-btn>
15 |         </div>
16 |       </q-card-section>
17 |     </q-card>
18 |   </div>
19 | </template>
20 | 
21 | <script setup lang="ts">
22 | const app = useNuxtApp();
23 | const route = useRoute();
24 | 
25 | const click = () => {
26 |   const url = route.path === '/' ? '/complicated' : '/';
27 |   navigateTo(url);
28 | };
29 | 
30 | const version = computed(() => {
31 |   return app.vueApp.version;
32 | });
33 | </script>
34 | 


--------------------------------------------------------------------------------
/layouts/complicated.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ClientOnly>
 3 |     <q-layout view="lHh LpR fFf">
 4 |       <q-header elevated class="bg-primary text-white">
 5 |         <q-toolbar>
 6 |           <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
 7 | 
 8 |           <q-toolbar-title>
 9 |             <q-avatar>
10 |               <img
11 |                 src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg"
12 |               />
13 |             </q-avatar>
14 |             Title
15 |           </q-toolbar-title>
16 | 
17 |           <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
18 |         </q-toolbar>
19 |       </q-header>
20 | 
21 |       <LeftDrawer v-model:open="leftDrawerOpen" />
22 | 
23 |       <q-drawer show-if-above v-model="rightDrawerOpen" side="right" bordered>
24 |         <!-- drawer content -->
25 |       </q-drawer>
26 | 
27 |       <q-page-container>
28 |         <slot />
29 |       </q-page-container>
30 |     </q-layout>
31 |   </ClientOnly>
32 | </template>
33 | 
34 | <script>
35 | import { ref } from 'vue';
36 | 
37 | export default {
38 |   setup() {
39 |     const leftDrawerOpen = ref(false);
40 |     const rightDrawerOpen = ref(false);
41 | 
42 |     return {
43 |       leftDrawerOpen,
44 |       toggleLeftDrawer() {
45 |         leftDrawerOpen.value = !leftDrawerOpen.value;
46 |       },
47 | 
48 |       rightDrawerOpen,
49 |       toggleRightDrawer() {
50 |         rightDrawerOpen.value = !rightDrawerOpen.value;
51 |       }
52 |     };
53 |   }
54 | };
55 | </script>
56 | 


--------------------------------------------------------------------------------
/components/LeftDrawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <q-drawer
 3 |     v-model="data"
 4 |     :key="data ? 'open' : 'close'"
 5 |     bordered
 6 |     class="bg-grey-2"
 7 |   >
 8 |     <q-list>
 9 |       <q-item-label header>Essential Links</q-item-label>
10 |       <q-item clickable tag="a" target="_blank" href="https://quasar.dev">
11 |         <q-item-section avatar>
12 |           <q-icon name="school" />
13 |         </q-item-section>
14 |         <q-item-section>
15 |           <q-item-label>Docs</q-item-label>
16 |           <q-item-label caption>quasar.dev</q-item-label>
17 |         </q-item-section>
18 |       </q-item>
19 |       <q-item
20 |         clickable
21 |         tag="a"
22 |         target="_blank"
23 |         href="https://github.com/quasarframework/"
24 |       >
25 |         <q-item-section avatar>
26 |           <q-icon name="code" />
27 |         </q-item-section>
28 |         <q-item-section>
29 |           <q-item-label>Github</q-item-label>
30 |           <q-item-label caption>github.com/quasarframework</q-item-label>
31 |         </q-item-section>
32 |       </q-item>
33 |       <q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
34 |         <q-item-section avatar>
35 |           <q-icon name="chat" />
36 |         </q-item-section>
37 |         <q-item-section>
38 |           <q-item-label>Discord Chat Channel</q-item-label>
39 |           <q-item-label caption>chat.quasar.dev</q-item-label>
40 |         </q-item-section>
41 |       </q-item>
42 |       <q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
43 |         <q-item-section avatar>
44 |           <q-icon name="forum" />
45 |         </q-item-section>
46 |         <q-item-section>
47 |           <q-item-label>Forum</q-item-label>
48 |           <q-item-label caption>forum.quasar.dev</q-item-label>
49 |         </q-item-section>
50 |       </q-item>
51 |       <q-item
52 |         clickable
53 |         tag="a"
54 |         target="_blank"
55 |         href="https://twitter.com/quasarframework"
56 |       >
57 |         <q-item-section avatar>
58 |           <q-icon name="rss_feed" />
59 |         </q-item-section>
60 |         <q-item-section>
61 |           <q-item-label>Twitter</q-item-label>
62 |           <q-item-label caption>@quasarframework</q-item-label>
63 |         </q-item-section>
64 |       </q-item>
65 |     </q-list>
66 |   </q-drawer>
67 |   <template></template>
68 | </template>
69 | 
70 | <script setup lang="ts">
71 | 
72 | import { useVModel } from '@vueuse/core';
73 | 
74 | const props = defineProps({
75 |   open: {
76 |     type: Boolean,
77 |     default: false,
78 |   },
79 | });
80 | 
81 | const emit = defineEmits(['update:open']);
82 | 
83 | const data = useVModel(props, 'open', emit);
84 | 
85 | 
86 | </script>
87 | 


--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
 2 | 	<path
 3 | 		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
 4 | 	<path fill="#050A14"
 5 | 		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
 6 | 	<path fill="#00B4FF"
 7 | 		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
 8 | 	<path fill="#00B4FF"
 9 | 		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
10 | 	<path fill="#050A14"
11 | 		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
12 | 	<path fill="#00B4FF"
13 | 		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
14 | 	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
15 | </svg>
16 | 


--------------------------------------------------------------------------------