I am trying to build a simple micro-frontend example using Vue3 and Module Federation but I have a collision problem.
I have the code here:
https://github.com/ghalex/mf-example
There are only two mf:
container (Vue3)
auth (Vue3)
The problem I have is that when I import the App.vue component:
// index.js - in container
import App from './components/App.vue'
// indexAuth.js - in auth
import App from './components/App.vue'
in the auth module and load the module in container the App.vue component is overwritten.
Is there any webpack settings am I missing to make sure each component is loaded separately ?
I found the problem, it is a webpack-dev-server v4 bug. I downgraded to v3 and everything works fine.
Related
I'm trying to import infinite-scroll module to my vue project, but the console says, that ".use" is an error.
console error:
main.js:
I have no idea what to do. But I really want an infinite scroll in my app.
For future reference, this would be the correct syntax to use
const app = createApp(App)
app.use(infiniteScroll).mount('#app')
However, the library vue-infinite-scroll is only compatible with Vue 2, so even with correct syntax, you can't install it in a Vue 3 app. For that you'll need to find something else
I have a base plugin that does some Vue prototyping like so:
import Vue from 'vue'
import mitt from "mitt"
Vue.prototype.emitter = mitt()
...
I have another plugin that needs to prefetch some data from a Laravel API and return it to this plugin so the results can be prototyped.
How can I access that other plugin from here to execute it?
Or how can I access app from Nuxt in this plugin without it being destructured in a function signature?
I'm happy to make the API call here in this plugin, but I don't see how to do that without access to app or $axios
I used npm install to include a client-side only plugin called vue-gallery and followed the instructions to load it as client-side only plugin as stated on the Nuxtjs docs. The plugin works fine with one exception: if I press f5 on any route that imports the plugin, Nuxt throws a 'Invalid or unexpected token' error. This is the error that is always thrown as when you would define the plugin as both client and serverside. The same happens if you type the URL directly in the browser. It does not happen however when you use the apps links to navigate to the page.
Note that this is just an external component type plugin, not a ES6 plugin.
vue-gallery.js
import Vue from 'vue'
import VueGallery from 'vue-gallery'
Vue.component('vue-gallery', VueGallery)
nuxt.config.js
plugins: [
'~/plugins/axios',
{ src: '~/plugins/vue-gallery.js', mode: 'client' }
],
In my pages component simply doing import VueGallery from 'vue-gallery'
Anyway to resolve this?
In my pages component simply doing import VueGallery from 'vue-gallery'
Thats the reason. If u import it in your pages it will be imported on SSR and so it will error, if its not SSR compatible. Since you are adding it globally as component in your plugin you dont need to import it in your pages
I have a Vue Cli 3 generated web component/custom element that uses Vuetify. I have a parent/host Vue App that is also using Vuetify. When the custom element loads into the host app, I get a bunch of Type errors as shown in the screenshot. e.g. Type Error: Cannot read property theme of undefined.
This appears to be a Vuetify issue. What is the correct architecture for using Vuetify within a Vue CLi custom element and in its host application?
Currently, I have Vue.js script tag in parent, for use by the custom element. And Vue is imported into the Vue app, as normal. Script tag is there only because the custom element requires it. I have Vuetify included in both as well. The web component is using the vuetify plugin. And so is the host.
The web component runs perfectly fine on its own, and so does the host app. So, apparently there are conflicts.
Thanks!
Donnie
Resolved this myself. In short, you cannot use the Vuetify plugin and the al-a-cart. It only works if you include the full Vue and Vuetify inside the web component. Not optimal, but at least it is a workaround for this Vuetify bug.
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
// import { VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider } from 'vuetify/lib';
export default {
/* components:{
VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider
} */
}
I am using nuxt js. I am trying to install a vue package vue-zoom. Actually few more plugins.
{ src: '~/plugins/zoom', ssr: false },
Here I kept ssr false because it gives errors like document is not defined...
In my plugins/zoom.js file I have this
import Vue from 'vue';
import vZoom from 'vue-zoom'
Vue.use(vZoom);
Now when I am trying to use this plugin like this
<v-zoom :img="`/uploads/${displayImg}`" ></v-zoom>
It gives me the above error.
Any reason or thought how can I use this plugin or similar in nuxt js?
I tried few more all gives similar errors.
Thank you
I got the same error when having the buildDir set to my functions/.nuxt folder, which I was using for SSR via Firebase Functions. I was able to solve the issue by making sure neither nuxt nor vue was installed in the node_modules inside the functions folder.
Are you using a similar setup by chance?