feat: layout

.editorconfig

@@ -0,0 +1,15 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{vue,js,ts,json,md,html}]
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <NuxtLayout>
+    <v-app>
+      <NuxtPage />
+    </v-app>
+  </NuxtLayout>
+</template>

components/DesktopSideBar.vue

@@ -0,0 +1,17 @@
+<template>
+    <v-navigation-drawer expand-on-hover rail>
+        <v-list>
+            <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg"
+                subtitle="sandra_a88@gmailcom" title="Sandra Adams"></v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list density="compact" nav>
+            <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
+            <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
+            <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+
+</template>

layouts/desktop.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-layout class="rounded rounded-md">
+    <!-- <p>desktop layout</p> -->
+    <DesktopSideBar />
+    <v-app-bar><slot name="app-bar-container"></slot></v-app-bar>
+    <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
+      <slot />
+    </v-main>
+    </v-layout>
+</template>

nuxt.config.ts

@@ -0,0 +1,25 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+export default defineNuxtConfig({
+  build: {
+    transpile: ['vuetify'],
+  },
+  modules: [
+    (_options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', (config) => {
+        // @ts-expect-error
+        config.plugins.push(vuetify({ autoImport: true }))
+      })
+    },
+    //...
+  ],
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true }
+})

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@mdi/font": "^7.4.47",
+    "nuxt": "^3.15.4",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "vite-plugin-vuetify": "^2.0.4",
+    "vuetify": "^3.7.9"
+  }
+}

pages/desktop/dashboard.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    Dashboard Page
+  </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: 'desktop'
+})
+</script>

pages/desktop/transaction.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <NuxtLayout name="desktop">
+      <template #app-bar-container>
+        <v-app-bar-title>Transactions</v-app-bar-title>
+      </template>
+      Transaction Page
+    </NuxtLayout>
+  </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+
+})
+</script>

pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Index</div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'desktop'
+})
+</script>

plugins/vuetify.ts

@@ -0,0 +1,12 @@
+// import this after install `@mdi/font` package
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    // ... your configuration
+  })
+  app.vueApp.use(vuetify)
+})

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}