browser error on props not found #16
Comments
|
Please provide a reproduction. |
|
@yyx990803 @jgribonvald I'm seeing the same issue. I created a project with // main.js
import Vue from 'vue'
import App from './App.vue'
import wrap from '@vue/web-component-wrapper'
import Toolbar from './components/Toolbar';
Vue.config.productionTip = false
Vue.config.devtools = false
const CustomElement = wrap(Vue, Toolbar)
window.customElements.define('toolbar', CustomElement)// Toolbar.js
<template>
<div class="toolbar">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Toolbar',
props: ['msg']
}
</script>
<style scoped>
.toolbar {
border: 3px solid orangered;
background-color: blueviolet;
color: white;
}
</style>Generated the Web Component as follows: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Web Components Example</title>
</head>
<body>
<div id="app">
<toolbar msg="This is the toolbar web component"></toolbar>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--Load the web component polyfill-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<!--Load your custom elements -->
<script src="toolbar.js"></script>
<script>
Vue.config.devtools=false
new Vue({
el: '#app'
})
</script>
</body>
</html>It would be good to include a basic example with props in the Web Component section of Vue 3 CLI docs in case we are missing something |
|
Hi, |
|
Same here. Any update? |
|
It seems that works if we don't build from main.js Prefer this command : "vue-cli-service build --target wc --name toolbar './src/components/toolbar.vue' So a better documentation or example would be welcome ! |
|
@jgribonvald Indeed, a more detailed example is needed in the docs. But it still doesn't explain why we get this error when we build with main.js |
|
Yeah we will update the docs, but basically, you don't need to do the wrapping/registration in
|
|
@yyx990803 Building from a file that was bootstrapping Vue allowed me to add plugins to my component. How am I supposed to add plugins if the wrapper is the one bootstrapping Vue now? |
|
@EpicButterz adding global plugins is a side effect, which is not something you should do in a 3rd party component. |
|
@yyx990803 For simple components, yes. My use case is a little different but not uncommon. I have a legacy Angular app that we are moving to Vue. We have chosen to create new pieces of the app in Vue and add them to Angular wrapped as web components. For the most part, these components are full fledged apps in themselves that can be 'embedded' anywhere. Adding plugins like |
|
@yyx990803 Almost all Vue components on https://github.com/vuejs/awesome-vue#ui-components are built as 3rd party global plugins. I agree that "adding global plugins is a side effect, which is not something you should do in a 3rd party component". However, this means that there are almost no UI components in the Vue ecosystem that can be used in Vue web components. This makes developing rich web components in Vue unviable. Is there any middle ground or a way to work around the issue? Our company wants to use Vue and web components but that currently isn't workable. We would prefer to not have to switch to Polymer. |
|
AFAIK not every component requires to be installed as a plugin. Most components can be imported individually and registered/used as local components (instead of relying on the global |
|
Similar to EpicButterz I would also like to use Vue to retro fit with older AngularJS code until we can replace it on the entire page / site. In my situation we have a multi-page site. We also have to deal with legacy code like a shopping cart written in AngularJS that is on all the pages. As time permits if all works... re-write the shopping cart as a Vue web component and retro AngularJS to work with the new Vue shopping cart wc. Would be great to use Vuetify, or Vue Bootstrap as a component framework as a plug-in vs. having to add as component that may require to use them on each of the inner components. For example, using the accordion panel that may be used inside of the web component. It would be great if we can write a Vue app that works both as standard Vue app or Web Component with npm run build-wc that write it out in dist-wc and npm run build goes to dist. Also nice to have a demo.html in public that we can tweak. |
|
How to convert a vue app using vuex store if we have to point directly to the app.vue file? |
|
@karol-f @yyx990803 when I put my target directly to my *.vue component, I'm not having access to the vue-router. How can I solve this? |
|
We are currently rebuilding and consolidating several bigger applications. For this we plan to use microservices and corresponding microfrontends (as in https://micro-frontends.org/ ). In our decision matrix Vue.js was one of the winning candidates. But now we are facing the same problem as @claudiolcastro. How can we have routing and other plugins inside our components? In short: we want to create small Vue.JS "apps" that will then be orchestrated in a bigger non-monolithic structure. |
|
@JohannesBayerAlbert In my understanding vue-web-component-wrapper is intended to produce as granular web components as possible and let developer decide if use it with vue, react or vanilla app and routing. IMHO You may:
Regards |
|
@yyx990803 @karol-f I use App.vue as entry but I get the
|
After creating a web component and deployed it into an html i'm getting this error :
But the component is working.
My component is developped with vue-cli 3.0.0-rc3
The text was updated successfully, but these errors were encountered: