I'm getting started with Vue 3 and Vite. How do I reference the Vue instance? I'm used to doing...
import Vue from 'vue'
but if I do this in my Vue3/Vite project, there's no default export in the vue module, so...
Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=d734dbd3' does not provide an export named 'default'
I'm clearly having the same problem as this person. I want to do things like Vue.config, Vue.observable(), Vue.set(). There's something very basic that I'm missing. Anyone ?
Yes, there is no longer a global instance of Vue available in Vue3:
https://v3-migration.vuejs.org/breaking-changes/global-api.html#global-api
You have to add these things to the app you created with createApp
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 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.
I have an express server serving only one GET route and return the file 'public/app.html'
This app.html file load vue.js throw cdn
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
I don't want to have a big component!
How can I put every component in a different file?
What I tried:
I created a /public/components/InputName.vue vuejs component.
And inside public/app.html in <script> I added:
import InputName from './InputName'
But I have this error
import declarations may only appear at top level of a module
Check this GitHub Repo :
it explains how you can load a component from a server:
https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http
I have to create an package of vue component and then install it in another project.
My code sample is given here. After using npm run build command I got a converted js file.
I install it in another project. And in my project in main.js, I am using below line to add this dependency.
import 'test'
but in my browser I am getting this error.
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
(found in )
I dont understand what I am missing for adding funnel component to my project.
You need to also declare in the components option.
import test from 'test
export default {
components: {
test
}
}
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
} */
}