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.
Related
Due to CSP Requirements I have had to convert a static vue application within the Vue 2 CLI environment.
After reading a lot of online documentation I am aware that for CSP compliant vue you need to use Render functions and a runtime version of Vue.js
My problem is that after converting my old static vue application to the Vue CLI build process I am still getting a 'unsafe-eval' is not an allowed message. I am not sure why this is the case, due to Vue 2's cli build process apparently using the CSP compliant runtime vue version, unless otherwise specified in the config file for webpack.
The specific code causing the CSP error (there is only one instance of it) is found in the built/output vendor.js file. The code causing the issue is:
function Ts(t, e) {
try {
return new Function(t)
} catch (n) {
return e.push({
err: n,
code: t
}), D
}
}
I have looked far and wide to figure out why this non CSP compliant code is appearing in Vue's built vendor.js file. Any advice would be great. I have read all of Vue's main documentation on CSP, and should re-iterate that I used Vue 2 CLI for the build and conversion of the static app.
For any other poor soul who have gone down the rabbit hole of Vue.js static to non-compiled CSP conversion, these 2 steps solved my issue:
Manually change csp\build\webpack.base.conf.js '$vue' property to the following:
Click to see image
In your main.js file change vue instantiation to the following pattern, this is needed so the component will mount correctly with the runtime build Click to see image
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
unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.
This is my app.js:
require('./bootstrap');
window.Vue = require('vue');
Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.
1. requiring polyfill
Approach: Adding require("#babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill
Result: Following Error Message shown in IE console:
SCRIPT1003: ':' expected
Clearly a compatibility issue, since pre data(){} is invalid in ES < 5
2. using mix.babel
Approach: Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
Result: Same Error Message as in 1
3. using an mix extension
Approach: Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})
Result: Again, the same Error Message as in 1
4. manually transpiling with babel-cli
Approach: Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/
Result: Stil no luck, same error as in 1
I am really starting to get frustrated, so any help is much appreciated.
If you can't get Babel-Polyfill to work, you could try using Polyfill.io, which automatically polyfills the selected Polyfills if the browser requires them.
All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head.
I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.
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 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?