Unable to display Vuetify build in Web component style

Question

Unable to display Vuetify build in Web component style

I'm currently working on an app that utilizes Vue and Vuetify with Web components. However, after adding Vuetify as a web component, I noticed that the CSS styles from Vuetify are no longer visible. I attempted to include

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css">

in the demo.html file, but this did not resolve the issue. You can find my repository at vuetify as web component. I have also added

transpileDependencies: [ 'vuetify' ]

to my vue.config.js, however, this has not fixed the problem either. It's important to note that the Vuetify styles are still not functioning properly. I have explored the following resources:

v-aoutocomplete not working with wc
Vuetify: external page CSS breaks Vuetify's component style
Custom Web Component image not showing

The steps taken and various options I've tried are outlined in the readme.MD file of my repository. Any guidance on how to successfully include Vuetify styles in a Web Component would be greatly appreciated.

javascript vue.js vuejs2 vuetify.js web-component

Answer 1

Answer №1

What is the problem at hand?

During the build process of a web component using vue-cli, the system overlooks the main.js file and opts for using entry-wc.js, following the official documentation which states:

When building a Webcomponent or Library, the entry point is not main.js, but an entry-wc.js file...

. This leads to issues where by default, vue-cli uses src/App.vue as the entry component, causing imported components like vuetify into App.vue to render one level below.

Potential Solution 1

To resolve this issue, remove all instances of vuetify's components from App.vue and place them one level lower in the hierarchy.

<template>
  <HelloWorld/> <!-- v-app / v-main / v-btn go inside HelloWorld -->
</template>

<script>
import vuetify from '@/plugins/vuetify'
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
  },
};
</script>

<style> 
  @import 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css';
</style>

Potential Solution 2

If preferred, keep vuetify's components within App.vue by eliminating the import vuetify... statement and <style> @Import.... Instead, create a separate 'wrapping' component (e.g. Wrap.vue), import vuetify and its styles into this new component, and then import App.vue. Add the new component name to the CLI command:

...
"wcin": "vue-cli-service build --target wc --inline-vue --name my-element 'src/Wrap.vue'"
...

Answer 2

What is the problem at hand?

During the build process of a web component using vue-cli, the system overlooks the main.js file and opts for using entry-wc.js, following the official documentation which states:

When building a Webcomponent or Library, the entry point is not main.js, but an entry-wc.js file...

. This leads to issues where by default, vue-cli uses src/App.vue as the entry component, causing imported components like vuetify into App.vue to render one level below.

Potential Solution 1

To resolve this issue, remove all instances of vuetify's components from App.vue and place them one level lower in the hierarchy.

<template>
  <HelloWorld/> <!-- v-app / v-main / v-btn go inside HelloWorld -->
</template>

<script>
import vuetify from '@/plugins/vuetify'
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
  },
};
</script>

<style> 
  @import 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css';
</style>

Potential Solution 2

If preferred, keep vuetify's components within App.vue by eliminating the import vuetify... statement and <style> @Import.... Instead, create a separate 'wrapping' component (e.g. Wrap.vue), import vuetify and its styles into this new component, and then import App.vue. Add the new component name to the CLI command:

...
"wcin": "vue-cli-service build --target wc --inline-vue --name my-element 'src/Wrap.vue'"
...

Unable to display Vuetify build in Web component style

Answer №1

What is the problem at hand?

Potential Solution 1

Potential Solution 2

Similar questions

AngularJs fails to render CSS styles

How to retrieve the changing input value in ReactJS using Jquery/JS

Inject the result.php file into a bootstrap modal using AJAX

The error persists in Ajax requests despite the correct usage of json_encode and everything functioning correctly

Locate the generated ID of the inserted child when saving the parent in MongoDB

Issue with Laravel Sanctum and Vue CLI not properly storing cookiesalternatively:Cookies

Guide to activating a watcher once the page finishes loading

Spring Boot fails to recognize path variable data sent from Angular

Conflict between Javascript and jQuery plugin discovered in testing environment

Storing the output of asynchronous promises in an array using async/await technique

Customized queries based on conditional routes - expressjs

Using Vue.js to update a variable in a parent component that is nested multiple layers deep

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Utilizing jQuery to load form(s), submit data via POST method, and fetch results without refreshing the

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Ensure the computed variable is always up-to-date using Firebase in VueJS

RadRotator fails to resize properly when browser window is resized

Utilizing the same uuid twice along with Vuex and the unique identifier generation tool uuidv4

What is the best method for retrieving options based on a data attribute?