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?
Related
i am trying to use dree to get the folder structure as a json object.
i have installed the package following the link : https://www.npmjs.com/package/dree
To test i have given the path to my components folder in my project
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App "/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
const dree = require('dree');
const tree = dree.scan('./components');
console.log(tree);
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
If I console.log (dree) then it's giving me the result but console.log(tree);
is giving me the below error. Please help.
index.js?517d:325 Uncaught TypeError: Cannot set property 'sizeInBytes' of nullenter code here at Object.scan (index.js?517d:325)
Dree uses the node fs module, that is not supported in browsers. Hence, dree is not supported in browsers.
Here you can find useful pieces of information about the modules with no browser-support used in vuejs, maybe you could use it at build-time and not run-time.
Unable to require 'fs' with Vue CLI 3
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.
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
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.
I have a project on Vue.js with Typescript and when I run dev server (prod build too) it returns error in console:
ERROR Failed to compile with 1 errors
This relative module was not found:
*./app.vue in ./src/main.ts
I alredy tried to checkout previous project commits, update global and local packages, clone and build project on other machines, delete and reinstall packages, delete package-lock.json, create new project via vue cli and add project files on new configuration - and nothing was changed. Same error. Very strange for me.
Here is my main.ts
import Vue from 'vue';
import App from './app.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
And here App.vue
<template>
<div id="app" class="container-fluid">
<header-component></header-component>
<main id="content" class="content row">
<transition name="fade">
<router-view/>
</transition>
</main>
<footer-component></footer-component>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderComponent from './components/header/header.component';
import FooterComponent from './components/footer/footer.component';
#Component({
components: {
HeaderComponent,
FooterComponent
}
})
export default class App extends Vue {}
</script>
<style lang="scss">
#import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
#import "../node_modules/font-awesome/css/font-awesome.min.css";
#import "../node_modules/vue2-animate/dist/vue2-animate.min.css";
#import "./styles/main.scss";
</style>
Thanks in advance for help.
It was a spelling error. I changed
import App from './app.vue';
to
import App from './App.vue';
and it fix the error.
Thanx to Derek for help
It could also be, because your node_modules, is not at the root of the project.
If you installed your nuxt project using Yarn try deleting the node_modules and then installing using npm i instead. There are some hooks that will not be run by yarn when installing your dependencies for nuxt.