install vuetify

README.md

@@ -2,6 +2,7 @@
 [![nodejs][badge-nodejs-img]][badge-nodejs-href]
 [![npm][badge-npm-img]][badge-npm-href]
 [![vike][badge-vike-img]][badge-vike-href]
+[![vuetify][badge-vuetify-img]][badge-vuetify-href]
 
 The IT4C Boilerplate for frontends
 
@@ -43,12 +44,12 @@ The following commands are available:
 
 ## Technology
 
-- [ ] vuetify
 - [x] vue3
+- [x] vike
+- [x] vuetify
 - [ ] pinia store
 - [ ] storybook
 - [ ] eslint
-- [x] vite vue3 ssr
 - [ ] figma
 - [ ] chromatic
 - [ ] jest
@@ -61,7 +62,8 @@ Storybook delivers Introduction producing errors: https://github.com/storybookjs
 
 ## Links
 
-See [Configuration Reference](https://vitejs.dev/config/).
+See [Configuration Reference](https://vitejs.dev/config/).\
+See [vite-plugin-ssr-vuetify](https://github.com/brillout/vite-plugin-ssr-vuetify).
 
 ## License
 
@@ -77,7 +79,6 @@ See [Configuration Reference](https://vitejs.dev/config/).
 [badge-vike-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=dependencies.vike&label=vike&color=green
 [badge-vike-href]: https://vike.dev/
 
-
 [badge-vuetify-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=dependencies.vuetify&label=vuetify&color=green
 [badge-vuetify-href]: https://vuetifyjs.com/
 

package.json

@@ -27,6 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@mdi/font": "^7.3.67",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/node": "^20.4.10",
@@ -36,12 +37,15 @@
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
     "sirv": "^2.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.9",
     "vike": "^0.4.145",
-    "vue": "^3.3.4"
+    "vite": "^4.4.9",
+    "vue": "^3.3.4",
+    "vuetify": "^3.4.0"
   },
   "type": "module"
 }

renderer/PageShell.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="layout">
-    <div class="navigation">
-      <a href="/" class="logo">
-        <img src="./logo.svg" height="64" width="64" alt="logo" />
-      </a>
-      <Link href="/">Home</Link>
-      <Link href="/about">About</Link>
-    </div>
-    <div class="content"><slot /></div>
-  </div>
+  <v-app>
+    <v-container>
+      <div class="layout">
+        <div class="navigation">
+          <a href="/" class="logo">
+            <img src="./logo.svg" height="64" width="64" alt="logo" />
+          </a>
+          <Link href="/">Home</Link>
+          <Link href="/about">About</Link>
+        </div>
+        <div class="content"><slot /></div>
+      </div>
+    </v-container>
+  </v-app>
 </template>
 
 <script lang="ts" setup>

renderer/app.ts

@@ -2,6 +2,7 @@ import { createSSRApp, defineComponent, h } from 'vue'
 import PageShell from './PageShell.vue'
 import { setPageContext } from './usePageContext'
 import type { Component, PageContext, PageProps } from './types'
+import vuetify from './vuetify'
 
 export { createApp }
 
@@ -21,6 +22,8 @@ function createApp(Page: Component, pageProps: PageProps | undefined, pageContex
   })
 
   const app = createSSRApp(PageWithLayout)
+  console.log('abc')
+  app.use(vuetify)
 
   // Make pageContext available from any Vue component
   setPageContext(app, pageContext)

renderer/vuetify.ts

@@ -0,0 +1,10 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/lib/styles/main.sass'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/lib/components/index.mjs'
+import * as directives from 'vuetify/lib/directives/index.mjs'
+
+export default createVuetify({
+  components,
+  directives
+})

src/pages/index/Counter.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" @click="state.count++">Counter {{ state.count }}</button>
+  <v-btn elevation="2" @click="state.count++">Counter {{ state.count }}</v-btn>
 </template>
 
 <script lang="ts" setup>

vite.config.ts

@@ -3,7 +3,8 @@ import vike from 'vike/plugin'
 import { UserConfig } from 'vite'
 
 const config: UserConfig = {
-  plugins: [vue(), vike()]
+  plugins: [vue(), vike()],
+  ssr: { noExternal: ['vuetify'] }
 }
 
 export default config