How to include vuetify3 inside vue3's component using composition API #21070

OnlyLoveOleg · 2025-03-05T23:02:16Z

OnlyLoveOleg
Mar 5, 2025

I would like to build a web component using Vuetify3 inside of a Vue3's component that is using composition API.

How do I add Vuetify3 to MyNavbar.ce.vue component so that it is scoped inside the component's shadow root?

This component will be dynamically loaded into applications/sites built with other frameworks/styles.

I want the component to be able to use Vuetify3 directives such v-app, v-app-bar, v-btn etc. within it.

Thank you, Oleg

I followed many online resources and arrived at the setup below but I can't get vuetify setup inside the component.

Project created:

npm create vue@latest

> npx
> create-vue

✔ Project name: … my-navbar
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No

Scaffolding project in /path/my-navbar...

Done. Now run:

  cd my-navbar
  npm install
  npm run dev

Vuetify installation:

cd my-navbar
npm install @mdi/font
npm i vuetify

Current files

src/main.js

import { defineCustomElement } from 'vue'
import MyNavbar from './components/MyNavbar.ce.vue'

// convert into custom element constructor
const element = defineCustomElement(MyNavbar)

// register
customElements.define('my-navbar', element)

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Element</title>
  </head>
  <body>
    <my-navbar></my-navbar>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

./src/components/MyNavbar.ce.vue

<script setup>

</script>

<template>
  <v-app>
    <v-app-bar>
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>

      <v-app-bar-title>Application Bar</v-app-bar-title>
    </v-app-bar>
  </v-app>
</template>

<style scoped>
  @import 'vuetify/styles';
</style>>