Как сделать раскрывающееся меню в nuxt.j?

1

npm install vuetify --save

1
2
3
4
5
6
7
8
9

// nuxt.config.js

export default {
  // ...
  plugins: [
    '@/plugins/vuetify'
  ],
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<template>
  <v-menu offset-y>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">Меню</v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index" @click="navigate(item.route)">
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { title: 'Главная', route: '/' },
        { title: 'О нас', route: '/about' },
        { title: 'Контакты', route: '/contacts' }
      ]
    }
  },
  methods: {
    navigate (route) {
      this.$router.push(route)
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <v-app>
    <v-navigation-drawer app>
      <!-- ваша навигация здесь -->
    </v-navigation-drawer>
    <v-app-bar app>
      <v-toolbar-title>
        <nuxt-link to="/">My App</nuxt-link>
      </v-toolbar-title>
      <my-menu></my-menu>
    </v-app-bar>
    <v-content>
      <nuxt />
    </v-content>
  </v-app>
</template>

<script>
import MyMenu from '~/components/MyMenu.vue'

export default {
  components: {
    MyMenu
  }
}
</script>