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.
Related
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 have a Freshly installed VITE app.
How to import vuelidate library and use as a Vue plugin to enable the functionality globally.
Vite does not show up "vuelidate" form.
Error says:
[vite] Avoid deep import "vuelidate/lib/validators" (imported by
/src/App.vue) because "vuelidate" has been pre-optimized by vite into
a single file. Prefer importing directly from the module entry:
import { ... } from "vuelidate"
If the dependency requires deep import to function properly, add the
deep path to optimizeDeps.include in vite.config.js.
main.js file
import { createApp } from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
App.vue file
<template>
<div>
<div class="form-group">
<label class="form__label">Name</label>
<input class="form__input" v-model.trim="$v.name.$model" />
</div>
<div class="error" v-if="!$v.name.required">Field is required</div>
<div class="error" v-if="!$v.name.minLength">Name must have at least {{ $v.name.$params.minLength.min }} letters.</div>
<tree-view :data="$v.name" :options="{ rootObjectKey: '$v.name', maxDepth: 2 }"></tree-view>
<div class="form-group">
<label class="form__label">Age</label>
<input class="form__input" v-model.trim.lazy="$v.age.$model" />
</div>
<div class="error" v-if="!$v.age.between">Must be between {{ $v.age.$params.between.min }} and {{ $v.age.$params.between.max }}</div>
<span tabindex="0">Blur to see changes</span>
<tree-view :data="$v.age" :options="{ rootObjectKey: '$v.age', maxDepth: 2 }"></tree-view>
</div>
</template>
<script lang="ts">
import { required, minLength, between } from "vuelidate/lib/validators";
export default {
name: "App",
data() {
return {
name: "",
age: 0,
};
},
validations: {
name: {
required,
minLength: minLength(4),
},
age: {
between: between(20, 30),
},
},
};
</script>
I am pretty sure that I must add the deep path to optimizeDeps.include in vite.config.js. to use vuelidate globally.
I have tried some lines on vite.config.js file like
optimizeDeps.include = "/node_modules/vuelidate/lib/validators"
said:
[vite] failed to load config from
E:\test\vue\vite.config.js:
or
optimizeDeps = "/node_modules/vuelidate/lib/validators"
said on console:
Uncaught SyntaxError: import not found: minLength
https://github.com/vitejs/vite#bare-module-resolving
Does it mean I can not use Vue.use(plugin) with vite_?
The vite Github page says "Note to Vue users: Vite currently only works with Vue 3.x. This also means you can't use libraries that are not yet compatible with Vue 3."
While the Vuelidate website has on its main page: "Simple, lightweight model-based validation for Vue.js 2.0".
So even while Vuelidate might work with Vue 3, Vite doesn't work with libraries that aren't compatible.
I guess your options here are to find a different validator, or to abandon using Vite.
I am using VueJS to build a website and I got to the point where I want to include my embedded profile into a page/Component in Vue. It seems to work only if I refresh the page. When I navigate from other pages to this page it is not displayed.
In my public/index.html I included LinkedIn Library Script
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
In my component:
<template>
<!-- some other code -->
<div class="col-md-4 col-sm-12 text-sm-center">
<div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="vertical" data-theme="dark" data-vanity="nicolae-orlov">
</div>
</div>
</template>
I saw some info that I need to reload the component to force it to re-render but I am not sure how. Any help is much appreciated.
If you want to add a script tag only on a specific component, you can use PostScribe to render a script after load.
After installing (npm i postscribe --save) and importing (import postscribe from 'postscribe'), you can add your script tag in the mounted lifecycle hook:
mounted() {
postscribe('#linkedin', '<script src="https://platform.linkedin.com/badges/js/profile.js"><\/script>')
}
where #linkedin refers to the ID of your profile badge element (add an ID if necessary)
Your linkedin badge should now be embedded in your Vue component.
You can add the javascript by injecting script into head and then adding the html into the respective component. This is how you can inject javascript directly into head from the component.
<script>
export default {
head(){
return{
script : [
{
src:
'https://platform.linkedin.com/badges/js/profile.js',
type:
'text/javascript'
}
],
}
}
}
</script>
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