I'm trying to create a Web Component using vue + vuetify.
I know that vuetify doesn't support web components, but I decided to give it a try (for sport) anyway.
Apart from some minor things, like having to manually import CSS, or manually register all vuetify components, everything seems to work fine.
There's however one big obstacle that I hit, which is trying to use <v-menu> in a web component. After being built, the button simply does nothing once it's clicked. I only get one warning in the console:
console.ts:34 [Vuetify] Unable to locate target [data-app]
I already tried making sure data-app is present, but to no avail.
I'm building the web component using:
npx vue-cli-service build --target wc --name tl-test --inline-vue
When I compare the vue project (ran via yarn serve) to the web component output (dist/demo.html), I can see that when I click the v-menu trigger button, the DOM of the dropdown gets created and appended to the page DOM. This doesn't seem to happen with the web component.
What am I missing that would prevent <v-menu> from working?
Repository reproducing the issue: https://github.com/samupl/vuetify-webcomponent-issue
You can pass a HTML node to the attach prop of the v-menu.
This will prevent Vuetify from using a query selector which wouldn't work with shadow DOMs.
For example:
<v-menu :attach="$parent.$el">
...
</v-menu>
Related
Guys i'm in the transition from vue2 to vue3.
As i know in vue2 you can't put more than One element in <template></template>
But when i create a new Vue3 project, you can see the code in that picture.The author did that.
Is that allowed to put two element in <template></template> in vue3?
If it is, why my VScode warning the fourth line?
The origin of the problem in most cases: Vetur
I see this problem a lot lately. The solution has always been the same: uninstall Vetur and install Volar instead, it is the new recommended extension for Vue 3.
As you can see Vue 3 no longer requires a single root node for components so you have some extension that does not detect it. Vetur has had trouble adapting to Vue 3. Maybe you have a version configured for Vue 2. In any case I recommend you Volar.
If your problem is with eslint or another lintern
Look for this vue plugin specific rule in the .eslintrc config file or package.json:
rules: {
...,
"vue/no-multiple-template-root": "off"
}
Just a quick question
Any user can see and access the data we use in the Vue model via Vue Devtool.
Imagine you have an employee list saved in Vue Obj and the user can see all other employees' emails etc..
Is there a way to hide data from the user browser devtool? Make sure devtool only shows development mode.
Thanks for the help.
When you are building a SPA project using vue CLI, the vue dev tools is disabled in production through webpack build by default but when you use vue in a HTML page like a MVC project which vue is added to some of its .cshtml files it isn't disabled, and you might need to configure it manually to make it disable.
you can do this by adding the line below before making your vue instance, I mean before new Vue({ ... }), add:
Vue.config.devtools = false
(worked in a MVC project)
and here is an article for this:
disable vue devtools in production
I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'.
Once I build npm run build the project, these styles are not applied anymore.
I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.
Anybody experienced the same and found official solution?
Examples below:
Live https://www.exchangehours.com/
Local Dev (sorry, no public domain)
The problem was in my lack of knowledge of VuetifyJs and te Vue itself.
# What I used
<div class="container"> </div>
# What needs to be used
<v-container> </v-container>
I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files.
Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.
So all works perfectly fine if you follow docs completely.
I've built a component in my vue + vuetify app and I want to make a web component out of it.
I managed to include vue and vuetify in the package, but the style, icons included, still isn't working in the shadow dom(which, actually, is a huge part of vuetify).
The component has to work without access to the internet.
I'm building the package with the following command:
vue-cli-service build --target wc --name <name> <component> --inline-vue
What should I do?
Thank you!
I created a web component with Vue CLI 3 and Element:
vue-cli-service build --target wc --name my-foo foo.vue
The component makes use of DatePicker and Select from Element, which in turn make use of some old version of popper.js and vue-popper under the covers. The Element source repository includes its own popper.js and vue-popper instead of using npm packages. The popper.js file in Element just says {{version}} so I'm not sure how old it is or if it's been heavily customized by the Element developers. It doesn't look much like the latest popper.js file.
As it is, the included version of Popper ends up throwing errors when a DatePicker or Select are activated inside the web component:
[Vue warn]: Error in callback for watcher "pickerVisible": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."
Running outside of the Vue CLI generated web component, the Element controls work fine. After some digging, I found that the web component wrapper that Vue CLI 3 generates makes use of shadowRoot, and the developer tools show #shadow-root (open) in the hierarchy when the web component is used at runtime.
Older versions of popper.js used to have issues with shadowRoot, but there is at least one merged pull request from back in 2016 that addresses the problem. It doesn't look like Element contains a version that is able to work properly within a shadow root, which is surprising considering how long ago the issue was fixed, and Element being a Vue-friendly library.
Can anyone suggest a workaround for the shadowRoot issue without giving up style isolation, or a clean way to force Element to make use of the latest vue-popper package instead of its own included version?
Forget about it. Use a better popover tool: https://www.npmjs.com/package/#soldeplata/popper-vue