I am new to Nuxt and having issues importing components.
components/Header.vue
<template>
<h1>Header</h1>
</template>
index.vue
<template>
<Header />
</template>
<script>
import Header from '#/components/Header';
export default {
components: {
Header
}
};
</script>
Replace the # with ~ but did not change anything
This is the error I am getting.
#/components/Header in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/buyer/index.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #/components/Header
Related
I am working on monorepo setup with turborepo combined with Vue & Storybook with below folder structure.
Currently I am unable to import storybook components in my Vue app. How can I do it?
apps/
app1/
app2/
package/
storybook/
hooks/
package.json
package-lock.json
I want to import storybook components from package in my Vue app.
Expected result -
<template>
<div>
<my-custom-button />
</div>
</template>
<script>
import MyCustomComponent from 'storybook';
export default {
components: {
MyCustomComponent
}
}
</script>
I'm trying to use a component from a node module I installed in Vue3, but it won't work.
I used:
npm install --save vue-slick-carousel
my component
<template>
<div>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
export default {
name: 'MyComponent',
components: {
VueSlickCarousel
}
}
</script>
It seems like components from the node_modules folder won't work in general, because I have tryed to use an other library. My own components from the src/components folder work perfectly.
I also tryed to register the component globally in my main.js file, but it also won't work.
In my browsers console I always get this error:
Uncaught TypeError: this.$scopedSlots is undefined
Can anyone help?
I use:
plugins/quasar.js
import Vue from 'vue';
import "quasar/dist/quasar.css";
import Quasar, { QBtn } from "quasar";
Vue.use(Quasar, { components: [QBtn] });
pages/index.vue
<template>
<div class="container">
<q-btn color="primary" icon="mail" label="On Left" />
</div>
</template>
on clear Nuxt+Quasar ($ npm install --save quasar) installation
QBtn is working fine, but icon is not showing.
I try many config-tricks like https://quasar.dev/options/quasar-icon-sets#Vue-CLI-Way && https://quasar.dev/options/quasar-icon-sets#Quasar-CLI-Way - not working.
What can I do with it.
Thank you!
//When I install Quasar as stand-alone framework ($ quasar create ) - icon-set is showing fine even without any configuration.
There is a basic tutorial for getting Nuxt going here:
https://github.com/nuxt-community/starter-template . I like all the stuff that Nuxt puts in place ; structure etc.
Next is installing the Kendo stuff from here:
https://www.telerik.com/kendo-vue-ui/getting-started/
npm install --save #progress/kendo-ui
npm install --save #progress/kendo-theme-default
npm install --save #progress/kendo-dateinputs-vue-wrapper
I have tried to put the steps into the index.vue page
( have removed the styles from the bottom just to make it less code )
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
vtest2
</h1>
<h2 class="subtitle">
Nuxt.js project
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
<kendo-calendar :value="new Date()"></kendo-calendar>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import { Calendar } from '#progress/kendo-dateinputs-vue-wrapper'
export default {
components: {
AppLogo,
Calendar
}
}
</script>
<style>
</style>
When I run npm run dev , it compiles but when I open the page I get:
ReferenceError
window is not defined node_modules\#progress\kendo-ui\js\kendo.core.js
});
return observable;
};
})(jQuery, window);
return window.kendo;
}, __webpack_require__(3));
what am I doing wrong?
Kendo for Vue does not support Server Side Rendering, but you can create a plugin and then in the nuxt.config.js file you must add it in client mode.
see the example.
/plugins/kendoui.js
import Vue from 'vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import {
KendoGrid,
KendoGridInstaller,
KendoGridColumn
} from '#progress/kendo-grid-vue-wrapper'
import {
KendoDataSource,
KendoDataSourceInstaller
} from '#progress/kendo-datasource-vue-wrapper'
Vue.use(KendoGridInstaller)
Vue.use(KendoDataSourceInstaller)
nuxt.config.js
plugins: [{
src: '~/plugins/kendoui.js',
mode: 'client'
}],
and that's works for me.
Kendo for Vue does not support Server Side Rendering and Nuxt because it needs the window object.
The Slider do not show up (is blank).
I install the iview in npm:
npm install iview --save-dev
in the main.js:
import iView from 'iview'
Vue.use(iView)
In my Reommend.vue component:
<template>
<div>
<Test01></Test01>
</div>
</template>
<script>
import Test01 from '../test/test01'
export default{
components: {
Test01,
},
}
</script>
<style scoped>
</style>
in my test/test01.vue:
<template>
<div>
<Slider v-model="value" range></Slider>
123
</div>
</template>
<script>
export default{
data(){
return {
value: [2, 22]
}
}
}
</script>
<style scoped>
</style>
when I npm run dev, there do not shows the Slider, only shows the 123:
If I comment the Vue.use(iView) in main.js, there will report Error:
vue.esm.js?efeb:578 [Vue warn]: Unknown custom element: <Slider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
So, why the <Slider> template do not show up in my project.
The official document is: https://www.iviewui.com/docs/guide/introduce
Import the CSS:
import 'iview/dist/styles/iview.css';
So your main.js will have:
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
DEMO CODESANDBOX here.