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
Related
I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583
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
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'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.
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?