diff --git a/cookbook/templates/frontend/tandoor.html b/cookbook/templates/frontend/tandoor.html
index a31e7a206..dc738af8b 100644
--- a/cookbook/templates/frontend/tandoor.html
+++ b/cookbook/templates/frontend/tandoor.html
@@ -1,11 +1,22 @@
{% load django_vite %}
+
+
+
+
+
+
+
+
+
+
+
+
{% vite_hmr_client %}
{% vite_asset 'src/apps/tandoor/main.ts' %}
-
-
+
+
-
diff --git a/vue3/package.json b/vue3/package.json
index c33311ad1..f9b6a2882 100644
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -9,8 +9,11 @@
"preview": "vite preview"
},
"dependencies": {
+ "@mdi/font": "7.2.96",
"pinia": "^2.1.7",
- "vue": "^3.4.15"
+ "vue": "^3.4.15",
+ "vue-router": "4",
+ "vuetify": "^3.3.15"
},
"devDependencies": {
"@tsconfig/node18": "^18.2.0",
@@ -21,6 +24,7 @@
"jsdom": "^22.1.0",
"typescript": "^5.2.2",
"vite": "^5.1.0",
+ "vite-plugin-vuetify": "^2.0.1",
"vue-tsc": "^1.8.27"
}
}
diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index c6b1f1f71..3dfa7b3f8 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -1,11 +1,60 @@
-
-
- Test Template content
-
-
\ No newline at end of file
+
+
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index 6a53f1f06..f31b54f2a 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -1,12 +1,42 @@
import {createApp} from "vue";
-import { createPinia } from 'pinia'
+import {createRouter, createWebHashHistory} from 'vue-router'
+import {createPinia} from 'pinia'
// @ts-ignore
import App from './Tandoor.vue'
+import 'vite/modulepreload-polyfill';
+import vuetify from "@/vuetify";
+import test1 from "@/components/test1.vue";
+import test2 from "@/components/test2.vue";
+
+// 1. Define route components.
+// These can be imported from other files
+
+
+// 2. Define some routes
+// Each route should map to a component.
+// We'll talk about nested routes later.
+const routes = [
+ {path: '/', component: test1},
+ {path: '/about', component: test2},
+]
+
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = createRouter({
+ // 4. Provide the history implementation to use. We
+ // are using the hash history for simplicity here.
+ history: createWebHashHistory(),
+ routes, // short for `routes: routes`
+})
+
const app = createApp(App)
app.use(createPinia())
+app.use(vuetify)
+app.use(router)
app.mount('#app')
diff --git a/vue3/src/assets/brand_logo.svg b/vue3/src/assets/brand_logo.svg
new file mode 100644
index 000000000..54c073f2c
--- /dev/null
+++ b/vue3/src/assets/brand_logo.svg
@@ -0,0 +1,164 @@
+
+
diff --git a/vue3/src/assets/logo_color.svg b/vue3/src/assets/logo_color.svg
new file mode 100644
index 000000000..01c93f04c
--- /dev/null
+++ b/vue3/src/assets/logo_color.svg
@@ -0,0 +1,43 @@
+
+
+
diff --git a/vue3/src/components/test1.vue b/vue3/src/components/test1.vue
new file mode 100644
index 000000000..8c0d075cb
--- /dev/null
+++ b/vue3/src/components/test1.vue
@@ -0,0 +1,15 @@
+
+
+
+Home
+
+
+
\ No newline at end of file
diff --git a/vue3/src/components/test2.vue b/vue3/src/components/test2.vue
new file mode 100644
index 000000000..149aa962e
--- /dev/null
+++ b/vue3/src/components/test2.vue
@@ -0,0 +1,15 @@
+
+
+
+About
+
+
+
\ No newline at end of file
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
new file mode 100644
index 000000000..b6a97ca4f
--- /dev/null
+++ b/vue3/src/vuetify.ts
@@ -0,0 +1,25 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+ theme: {
+ defaultTheme: 'light',
+ themes: {
+ light: {
+ colors: {
+ primary: '#b98766',
+ secondary: '#b55e4f',
+ success: '#82aa8b',
+ info: '#385f84',
+ warning: '#eaaa21',
+ error: '#a7240e',
+ },
+ },
+ },
+ },
+})
+
diff --git a/vue3/vite.config.ts b/vue3/vite.config.ts
index fc8279c14..14e628bbd 100644
--- a/vue3/vite.config.ts
+++ b/vue3/vite.config.ts
@@ -2,12 +2,18 @@ import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
+import vuetify, {transformAssetUrls} from 'vite-plugin-vuetify'
// https://vitejs.dev/config/
export default defineConfig({
base: '/static/vue3/',
plugins: [
- vue({}),
+ vue({
+ template: {transformAssetUrls}
+ }),
+ vuetify({
+ autoImport: true,
+ }),
],
resolve: {
alias: {
diff --git a/vue3/yarn.lock b/vue3/yarn.lock
index 4e0df9c92..9d4136cdb 100644
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -127,6 +127,11 @@
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+"@mdi/font@7.2.96":
+ version "7.2.96"
+ resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.2.96.tgz#af800d9fe3b424f85ad45e9baa755bd003ab4986"
+ integrity sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w==
+
"@rollup/rollup-android-arm-eabi@4.12.0":
version "4.12.0"
resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz#38c3abd1955a3c21d492af6b1a1dca4bb1d894d6"
@@ -366,6 +371,13 @@
resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.4.0.tgz#f01e2f6089b5098136fb084a0dd0cdd4533b72b0"
integrity sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==
+"@vuetify/loader-shared@^2.0.1":
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-2.0.1.tgz#4bb50ce6455b1c37958a58a63cc32e4ae6829287"
+ integrity sha512-zy5/ohEO7RcJaWYu2Xiy8TBEOkTb42XvWvSAJwXAtY8OlwqyGhzzBp9OvMVjLGIuFXumBpXKlsaVIkeN0OWWSw==
+ dependencies:
+ upath "^2.0.1"
+
abab@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -433,7 +445,7 @@ de-indent@^1.0.2:
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-debug@4:
+debug@4, debug@^4.3.3:
version "4.3.4"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -775,6 +787,11 @@ universalify@^0.2.0:
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+upath@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+ integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
+
url-parse@^1.5.3:
version "1.5.10"
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
@@ -783,6 +800,15 @@ url-parse@^1.5.3:
querystringify "^2.1.1"
requires-port "^1.0.0"
+vite-plugin-vuetify@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.1.tgz#172ffb6c46fec469fa96b3df03fd11b90d48f5d6"
+ integrity sha512-GlRVAruohE8b0FqmeYYh1cYg3n8THGOv066uMA44qLv9uhUxSLw55CS7fi2yU0wH363TJ2vq36zUsPTjRFrjGQ==
+ dependencies:
+ "@vuetify/loader-shared" "^2.0.1"
+ debug "^4.3.3"
+ upath "^2.0.1"
+
vite@^5.1.0:
version "5.1.3"
resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.3.tgz#dd072653a80225702265550a4700561740dfde55"
@@ -799,6 +825,13 @@ vue-demi@>=0.14.5:
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+vue-router@4:
+ version "4.2.5"
+ resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
+ integrity sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==
+ dependencies:
+ "@vue/devtools-api" "^6.5.0"
+
vue-template-compiler@^2.7.14:
version "2.7.16"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
@@ -827,6 +860,11 @@ vue@^3.4.15:
"@vue/server-renderer" "3.4.19"
"@vue/shared" "3.4.19"
+vuetify@^3.3.15:
+ version "3.5.4"
+ resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.4.tgz#f919c5194995a123815c277a95812bc230e33464"
+ integrity sha512-fHgfWMI7+z/UtbVPOezX+O1MNBOOMBW9HnKejcBIyQQ7jFRnTHbDQmbINf25FK0wrg/zkjfzyOmWWREKW39eXg==
+
w3c-xmlserializer@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"