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.
Related
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.
How can I use VueJS plugins if I don't use any Javascript Package Managers (NodeJS, NPM)?
I'm building an app made from a Bootstrap template and Server Side framework in Coldfusion (CFWheels).
I wanted to use some of VueJS's functionality such as two-way data-binding, easier integration of animation using animate.css, etc. I included it via
<script src="https://unpkg.com/vue"></script>
However, I can't use NPM as the app will be continually be improved and maintained in production.
I wanted to use some VueJS plugin such as VueJS typeahead.
When I include the script, and try the documentation, there are errors in the Javascript like being unable to import, export module, require. I think these are modern Javascript coding style that are not recognized in my setup because I didn't use the NPM and require those polyfills.
Is there a way that I can make those VueJS plugins work? Or if I can just include the polyfills needed and proceed with the plugin documentations so the browser will understand those new JS terms without using NPM or other Javascript Package Manager.