[Vuejs]-Vuetify instance with cdn not work on vuejs3

by

5👍

You are facing this issue because you included Vuetify 2.x which is not compatible with Vue 3. So, use Vuetify 3 instead.

Now, the right way to use Vuetify via CDNs, you need to follow these steps-

  1. Import Vuetify CSS in your head tag-
<link
  href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
  rel="stylesheet"
/>
  1. If you want to use material design icons, then import this CSS link in your head tag too-
<link
  href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>
  1. Import the Vuetify script in your body tag-
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
  1. If you are planning to use Vue3 also via CDN, then import the Vue script in your body tag-
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Here is a complete working HTML file with all necessary imported CDNs for Vue3 and Vuetify3-

<!DOCTYPE html>
<html>
  <head>
  <link
    href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
    rel="stylesheet"
    />
  <link
    href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
    rel="stylesheet"
    />
</head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
    <script type="text/x-template" id="app-template">
      <v-app>
        <v-card
          class="mx-auto"
          width="400"
          append-icon="mdi-human-greeting"
        >
          <template v-slot:title>
            Title
          </template>
          <v-card-text>
            Description
          </v-card-text>
        </v-card>
      </v-app>
    </script>
    <script>
      const { createApp } = Vue;
      const { createVuetify } = Vuetify;
      
      const vuetify = createVuetify();
      
      const app = createApp({
        template: "#app-template", 
      })
        .use(vuetify)
        .mount("#app");
    </script>
  </body>
</html>

To read more about using CDNs, read here-

  1. https://next.vuetifyjs.com/en/getting-started/installation/#cdn
  2. https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons
👤Neha Soni

Leave a comment