When i run the command to deploy my nuxt app. The VueSlickCarousel Component plugin i use to for my slider is not rendering the default vue-slick-carousel.css even though i include it in the global css array in the nuxt.config.js, does anyone know why this is happening and how to resolve it?
css: [
'~/assets/scss/main.scss',
'vue-slick-carousel/dist/vue-slick-carousel.css',
'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
],
Related
I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
I'm currently starting a new project with vuejs and wanted to use primevue for some components.
My knowledge with VueJS in general is not the best, because I'm just getting started with it.
My application has a webpack based build with vue-loader configured, so thats how primevue is getting installed.
I was trying to use the Toast-Component, but when importing Toast from 'primevue/toastservice' webpack throws these two errors:
ERROR in ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './ToastMessage' in '*/node_modules/primevue/components/toast'
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&) 11:0-42 86:24-36
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&
# ./node_modules/primevue/components/toast/Toast.vue
# ./node_modules/primevue/toast.js
# ./src/main.js
and
ERROR in ./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css&) 97:0
Module parse failed: Unexpected token (97:0)
File was processed with these loaders:
*./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
-> .p-toast {
| position: fixed;
| width: 20em;
# ./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& 1:0-118 1:134-137 1:139-254 1:139-254
# ./node_modules/primevue/components/toast/Toast.vue
# ./node_modules/primevue/toast.js
# ./src/main.js
I import the Component as following:
import Vue from "vue";
import App from "./App/App.vue";
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
Vue.use(ToastService);
Vue.component('Toast', Toast);
new Vue({
render: h => h(App)
}).$mount("#app");
I already tried importing/using the 'Toast' component in my App.js or in other files where i mainly wanna use those Toasts without success.
If I leave out the Toast all works fine, so the ToastService seems alright.
So if theres anybody who uses primevue and also ran into this problem and found a solution I thank you all in advance.
npm install mitt
solves the first issue. It is included in devDependencies of the primevue package, but for some reasons its not installed.
I have a solution for your second error, but not sure how to fix your first "Can't resolve" error, as I am still figuring that one out.
What does your webpack config look like? Do you specify a rule for CSS files? If the component uses a <style> block you need to tell webpack how to handle this.
Specify a rule for .css files, and it will also apply the same to <style> blocks in .vue files. Without this, webpack does not know how to parse the blocks.
So make sure your webpack.config.js rules section has the following CSS part in it (or something similar):
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
Also make sure to install the relevant tools in your package.json.
I solved something similar, so see my question and answer for more detailed info.
On the page I use my component that I import locally.
Inside that component I use an external one (vue-carousel) but since it's client only, I've built a plugin that imports the vue-carousel and registers its components globally.
It works on npm run dev but if I run npm run generate it stops working and in the inspector I see the tags instead of the component itself. I use a local IIS setup.
Demo repo: https://github.com/MrZordex/inner-component-problem
Any ideas how that could happen?
Change your nuxt.config.js file:
plugins: [
{src: '#/plugins/vue-carousel.client.js', mode: 'client'}
// {src: '#/plugins/vue-carousel.client.js', ssr: false} // or
]
Some plugins might work only in the browser because they lack SSR support. In these situations you can use the mode: client option in plugins to add the plugin only on the client-side.
Note: Since Nuxt.js 2.4, mode has been introduced as option of plugins to specify plugin type, possible value are: client or server. ssr: false will be adapted to mode: 'client' and deprecated in next major release.
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?