Блог

Главная - Вопросы по программированию - Nuxt и Vuetify, как использовать цвет в таких компонентах, как v-панель инструментов

Nuxt и Vuetify, как использовать цвет в таких компонентах, как v-панель инструментов

#vue.js #sass #nuxt.js #vuetify.js

Вопрос:

Я использую Nuxt 2 и Vuetify 2.
Я пытаюсь создать простой v-toolbar компонент Vuetify и придать ему цвет.

Документация De говорит мне сделать это так:

 <template>
  <v-toolbar flat color="green"> <!-- this does not make the toolbar green! -->
    <v-toolbar-title>
      My title here
    </v-toolbar-title>
  </v-toolbar>
</template>

flat Атрибут работает, так как он изменяет внешний вид панели инструментов.

Однако color="green" атрибут работает не так, как ожидалось. Панель инструментов не становится зеленой.
При просмотре html в моем браузере я вижу, что свойство «зеленый» добавляется в разметку как класс:

 <header 
  data-v-3ece7af3="" 
  data-v-23162205="" 
  class="v-sheet theme--light v-toolbar v-toolbar--flat green" 
  style="height: 64px;">

Я настроил Nuxt так, как предлагает документация Vuetify:

 // nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true
  },
}
 
 // assets/variables.scss
@import '~vuetify/src/styles/styles.sass';

Я упускаю здесь что-то очевидное?

Комментарии:

1. Доступен ли цвет в вашей конфигурации? Может быть, он перезаписан чем-то другим?

2. Я не совсем понимаю, о чем ты говоришь. Я нигде не определял «зеленый», так как ожидаю, что Vuetify определит его для меня. Я пробовал другие цвета «материального дизайна», такие как «серый свет-4», и они тоже не работают.

3. Я не уверен в вашей конфигурации, но недавно созданный проект отлично работает с вашим шаблоном, только что протестирован.

4. Я пытаюсь выяснить, что не так с моей конфигурацией. Я использую nodejs с Nuxt в качестве плагина (используя app.use(nuxt.render); и build(nuxt) ;), и я не вижу, как начать с чистой установки Nuxt.

5. Ваши компоненты vuetify завернуты в v-app тег?

Ответ №1:

Вероятно, вы забыли обернуть свои компоненты внутри v-app тега, и это может решить вашу проблему.

Метки: , ,