Update to nuxt3 and vuetify3

Author: rekryt

.dockerignore

@@ -1,3 +1,5 @@
+.git
+.nuxt
+.output
 node_modules
-npm-debug*
-.nuxt
+tmp

.editorconfig

@@ -1,13 +1,43 @@
 [*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 4
-insert_final_newline = true
-trim_trailing_whitespace = true
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+tab_width=4
 
-[*.md]
-trim_trailing_whitespace = false
+[*.vue]
+indent_style=space
+indent_size=4
+
+[*.scss]
+indent_style=space
+indent_size=4
+
+[*.json]
+indent_style=space
+indent_size=4
+
+[{phpunit.xml.dist,*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
+indent_style=space
+indent_size=4
+
+[*.svg]
+indent_style=space
+indent_size=4
+
+[.editorconfig]
+indent_style=space
+indent_size=4
+
+[{*.gy,*.groovy,*.gant,*.gdsl}]
+indent_style=space
+indent_size=4
+
+[{*.ats,*.ts}]
+indent_style=space
+indent_size=4
 
 [{*.yml,*.yaml}]
-indent_size = 2
+indent_style=space
+indent_size=2
+

.eslintrc.js

@@ -1,28 +1,24 @@
 module.exports = {
     env: {
         browser: true,
-        es6: true,
+        es2021: true,
         node: true,
     },
-    extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:nuxt/recommended', '@vue/prettier'],
-    globals: {
-        Atomics: 'readonly',
-        SharedArrayBuffer: 'readonly',
-    },
+    extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:nuxt/recommended',
+        'plugin:vue/vue3-recommended',
+        'prettier',
+    ],
     parserOptions: {
-        ecmaVersion: 2018,
+        ecmaVersion: 'latest',
+        parser: '@typescript-eslint/parser',
         sourceType: 'module',
     },
-    plugins: ['vue'],
+    plugins: ['@typescript-eslint'],
     rules: {
-        'no-console': 'off',
-        'vue/multiline-html-element-content-newline': [
-            2,
-            {
-                ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
-                allowEmptyLines: false,
-            },
-        ],
+        'vue/html-indent': 'off',
+        'vue/html-self-closing': 'off',
+        'vue/multi-word-component-names': 'off',
     },
 };

.gitattributes

@@ -10,6 +10,7 @@
 *.sln text eol=lf
 *.php text eol=lf
 *.js text eol=lf
+*.ts text eol=lf
 *.json text eol=lf
 *.vue text eol=lf
 *.css text eol=lf

.gitignore

@@ -1,6 +1,8 @@
 # Dependencies
-node_modules/
-jspm_packages/
+node_modules
+.output
+.nitro
+jspm_packages
 vendor
 
 # Only keep yarn.lock in the root
@@ -10,7 +12,7 @@ composer.lock
 
 # Logs
 /logs
-*.log
+*.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -126,3 +128,6 @@ dist
 
 # Robots Files
 robots.txt
+
+# Ignore Service Worker
+sw.*

Dockerfile

@@ -1,11 +1,13 @@
-FROM node:14.16
+FROM node:18.12.0-alpine
 
-WORKDIR /var/www
+# create destination directory
+RUN mkdir -p /home/nuxt
+WORKDIR /home/nuxt
 
-COPY . /var/www
-
-RUN npm install \
-	&& npm run build
+# copy the app, note .dockerignore
+COPY . /home/nuxt/
+RUN npm install
+RUN npm run build
 
 EXPOSE 3000
 

README.md

@@ -1,8 +1,8 @@
-# nuxt-vuetify-dashboard
+# nuxt3-vuetify3-dashboard
 
-> Nuxt.js + Vuetify.js + Material Dashboard
+> Nuxt 3 + Vuetify 3 + Material Dashboard
 
-![alt text](http://rekryt.ru/files/nuxt-vuetify-dashboard.png)
+![alt text](http://rekryt.ru/files/nuxt3-vuetify3-dashboard.png)
 
 ## Build Setup
 
@@ -19,10 +19,7 @@ Open http://localhost:3000
 ```shell
 # build for production and launch server
 $ npm run build
-$ npm start
-
-# or generate static project
-# npm run generate
+$ npm run start
 ```
 
 ## Docker
@@ -33,6 +30,6 @@ $ docker run -it -e HOST=0.0.0.0 -p 3000:3000 nuxt_dashboard
 Open http://`docker-machine ip`:3000
 
 For detailed explanation on how things work, check out:
-- [Material-dashboard](https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html) documentation
-- [Vuetify.js](https://vuetifyjs.com/) documentation
-- [Nuxt.js](https://github.com/nuxt/nuxt.js)
+- [Vuetify 3](https://vuetifyjs.com/) documentation
+- [Nuxt 3](https://nuxt.com)
+- [Material-dashboard](https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html) old documentation

assets/less/blocks/editor.less

@@ -0,0 +1,3 @@
+body {
+    min-width: 320px;
+}

assets/less/main.less

@@ -1,44 +1,47 @@
 <template>
-    <v-app-bar id="core-app-bar" absolute app color="transparent" flat height="88">
-        <v-toolbar-title class="tertiary--text font-weight-light align-self-center">
-            <v-btn v-if="responsive" dark icon @click.stop="onClick">
+    <v-app-bar id="core-app-bar" absolute color="transparent" flat height="88">
+        <v-toolbar-title class="font-weight-light align-self-center">
+            <v-btn v-show="!responsive" icon @click.stop="onClick">
                 <v-icon>mdi-view-list</v-icon>
             </v-btn>
             {{ title }}
         </v-toolbar-title>
 
         <v-spacer />
 
-        <v-toolbar-items>
+        <v-toolbar-items class="flex-fill">
             <v-row align="center" class="mx-0">
                 <v-text-field class="mr-4 purple-input" color="purple" label="Search..." hide-details />
 
-                <v-btn icon to="/">
+                <v-btn height="48" to="/" icon>
                     <v-icon color="tertiary">mdi-view-dashboard</v-icon>
                 </v-btn>
 
-                <v-menu bottom left offset-y transition="slide-y-transition">
-                    <template v-slot:activator="{ attrs, on }">
-                        <v-btn class="toolbar-items" icon to="/notifications" v-bind="attrs" v-on="on">
-                            <v-badge color="error" overlap>
-                                <template slot="badge">
-                                    {{ notifications.length }}
-                                </template>
-                                <v-icon color="tertiary">mdi-bell</v-icon>
-                            </v-badge>
-                        </v-btn>
-                    </template>
-
-                    <v-card>
-                        <v-list dense>
-                            <v-list-item v-for="notification in notifications" :key="notification" @click="onClick">
-                                <v-list-item-title v-text="notification" />
+                <client-only>
+                    <v-menu bottom left offset-y transition="slide-y-transition">
+                        <template #activator="{ props }">
+                            <v-btn class="toolbar-items" height="48" to="/notifications" v-bind="props" icon>
+                                <v-badge color="error">
+                                    <template #badge>
+                                        {{ notifications.length }}
+                                    </template>
+                                    <v-icon color="tertiary">mdi-bell</v-icon>
+                                </v-badge>
+                            </v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item v-for="(item, index) in notifications" :key="index" :value="index">
+                                <v-list-item-title>{{ item }}</v-list-item-title>
                             </v-list-item>
                         </v-list>
-                    </v-card>
-                </v-menu>
+                    </v-menu>
+                </client-only>
 
-                <v-btn to="/user-profile" icon>
+                <v-btn height="48" icon @click="toggleTheme">
+                    <v-icon color="tertiary">mdi-theme-light-dark</v-icon>
+                </v-btn>
+
+                <v-btn to="/user-profile" height="48" icon>
                     <v-icon color="tertiary">mdi-account</v-icon>
                 </v-btn>
             </v-row>
@@ -48,9 +51,25 @@
 
 <script>
 // Utilities
-import { mapMutations } from 'vuex';
+import { mapActions } from 'pinia';
+import { useAppStore } from '../../stores/app';
+import { useDisplay, useTheme } from 'vuetify';
 
 export default {
+    setup() {
+        const theme = useTheme();
+        const cookieTheme = useCookieTheme();
+
+        return {
+            theme,
+            toggleTheme: () => {
+                const themeValue = theme.global.current.value.dark ? 'light' : 'dark';
+                theme.global.name.value = themeValue;
+                cookieTheme.value = themeValue;
+            },
+        };
+    },
+
     data: () => ({
         notifications: [
             'Mike, John responded to your email',
@@ -60,34 +79,30 @@ export default {
             'Another One',
         ],
         title: null,
-        responsive: false,
     }),
 
+    computed: {
+        responsive() {
+            const display = useDisplay();
+            return display.lg.value;
+        },
+    },
+
     watch: {
         $route(val) {
             this.title = val.name;
         },
     },
 
-    mounted() {
-        this.onResponsiveInverted();
-        window.addEventListener('resize', this.onResponsiveInverted);
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.onResponsiveInverted);
+    created() {
+        this.setDrawer(this.responsive);
+        this.title = this.$route.name;
     },
 
     methods: {
-        ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
+        ...mapActions(useAppStore, ['setDrawer', 'toggleDrawer']),
         onClick() {
-            this.setDrawer(!this.$store.state.app.drawer);
-        },
-        onResponsiveInverted() {
-            if (window.innerWidth < 991) {
-                this.responsive = true;
-            } else {
-                this.responsive = false;
-            }
+            this.setDrawer(!useAppStore().drawer);
         },
     },
 };