Блог

Я пытаюсь создать боковую панель в веб-приложении Vue с помощью vuetify. Я использую Vue3 и Vuetify 3.0.0-alpha.12, и мне трудно понять, как это сделать, потому что в большинстве примеров, которые я нахожу, используется Vue2.

Я новичок в Vue (а также в разработке интерфейсов), и я создал пример проекта, используя Vue Cli, а затем просто добавил боковую панель Vuetify.

Это мой main.js

 import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createVuetify} from "vuetify"

const vuetify = createVuetify()
createApp(App).use(router).use(vuetify).mount("#app");
 

И App.vue

 <template>
  <Sidebar></Sidebar>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<script>
import Sidebar from "@/components/Sidebar.vue";

export default {
  components: {
    Sidebar,
  },
};
</script>
 

Sidebar.vue Взято из документации Vuetify

 <template>
    <v-card
      class="mx-auto"
      height="400"
      width="256"
    >
      <v-navigation-drawer
        class="deep-purple accent-4"
        dark
        permanent
      >
        <v-list>
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
  
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
  
        <template v-slot:append>
          <div class="pa-2">
            <v-btn block>
              Logout
            </v-btn>
          </div>
        </template>
      </v-navigation-drawer>
    </v-card>

</template>
<script>
  export default {
    data () {
      return {
        items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Photos', icon: 'mdi-image' },
          { title: 'About', icon: 'mdi-help-box' },
        ],
        right: null,
      }
    }
  }
</script>
 

При запуске этого я получаю Failed to resolve component: v-list-item-content для каждого компонента vuetify, который я использую.

Я пробовал vuetify-loader, как описано здесь, но при добавлении в package.json я получаю некоторую ошибку зависимости. Насколько я понимаю, vuetify-loader может быть заменен на

 import { VCard } from 'vuetify/lib'
...
 

Sidebar.vue и я пытался, но все равно получаю Failed to resolve ошибку.

Кто-нибудь знает, что я делаю не так? Я почти уверен, что это какая-то глупость.