I am using Vuetify only for nested Vue app inside a larger Laravel app. However, the Vuetify.js created stylesheets that effect all the styles from the base level of the app, where all the Laravel and Laravel styles were -- it's overriding them. I am not sure how to 'scope' it since it's the Vuetify.js script that is dynamically creating the stylesheets.
Related
I have a vue 3 app which builds some web components as custom elements. That works fine, I can define an html tag and use it in other apps and in my own vue app. I export the styles with the .ce.vue file ending.
Now I want to use the web components as normal vue components inside my app, but then the styles are not applied anymore. When I remove the custom element tag (the ce.vue. file ending), the vue component looks fine, but the web component loses it's styling.
Is there a way to be able to use a component in both ways, as a vue component and a web component?
I am trying to register my component as shadowdom in Vue when creating new Vue component from Vue instance you can attach shadowdom but in nuxt i`m confused .
Hi I want to initiate Vue application from separate project and import Vue components to it by another project. When working on I got an issue between multiple Vue instances . To solve that I'm trying to create separate bundle for Vue and try to initiate application on separate project by it which uses to create components. How to create separate bundle for Vue which can be used from different projects?
Hi for reference any one. Inside webpackconfig under externals can define as Vue : ['Vue'].
I'm using vue-cli-service to generate web components as
vue-cli-service build --target wc 'components/*.vue'
In order to generate a bundle with all components inside that folder. Until now works very well and I can even mount the components on my page
<script src="https://unpkg.com/vue"></script>
<script src="/dist/bundle.min.js"></script>
<my-component></my-component>
The problem I'm having is that the web component doesn't inherit the styling of the current page.
Imagine I'm working with a bootstrap layout, i would need to import that package within the web component?
Is there any way for me to disable the shadow dom even if for that it sacrifices some functionalities of the wc ? (such as slots, etc. that i'm not going to use)
Currently, there is no way to do this with vue-cli-service.
There is a fork of official Vue Web Component Wrapper here. This fork allows you to disable the shadow DOM but that doesn't support the slots.
However, if you want to use that then you cannot use vue-cli-service. You will have to setup your own build using Webpack or Rollup.
I am using buefy autocomplete component with nuxt.js. I have imported the CSS file. and the CSS working properly on the localhost but on the live server is not working. I thought the problem may be with buefy but the same problem I am facing with vue-select autocomplete.
Everything is perfect on the local server but when I move my files to live server and do num run build noting works from buefy and vue-select.
Note: the rest of all CSS working just fine
Localhost
Production
And it's not only autocomplete component, none of the buefy components are working, Radio Buttons, Calender etc.
A little guidance will be appreciated.
Thanks
As of today, Buefy has an official support for Nuxt. Instead of importing buefy's css inside nuxt.config.js and creating a new plugin, you can use a nuxt module.
If you create a new Nuxt project using create-nuxt-app, you can choose to add Buefy as your UI framework.
If you have an existing nuxt project, you can simply install the nuxt-buefy module manually:
npm i nuxt-buefy
nuxt.config.js
...,
modules: [
'nuxt-buefy',
],
...