We Keep Coding

Vue Component- > Export default ... was not found in

i want to create a dashboard as a component. but i always get this error in my cmd
"export 'default' (imported as 'DashboardLayoutComponent') was not found in '#syncfusion/ej2-vue-layouts'
does anyone know how i can fix this issue?

According to the docs, it appears DashboardLayoutComponent is a named export, thus you must import it as such:
import { DashboardLayoutPlugin } from '#syncfuion/ej2-vue-layouts';
Note the { }.

vue component should be register with default example:
import { ComponentA } from './ComponentA.vue' // if exported as normal
// import ComponentA from './ComponentA.vue' // if exported as default
export default { // component registoring with default
components: {
ComponentA
},
// code
}

Enable VeeValidate on Form

Currently I'm trying to add VeeValidate component to validate my form on Laravel, I just have installed Vue with NPM and it seems to be working, but how to enable a component for Vue?
Currently I have in my app.js:
window.Vue = require('vue');
window.JQuery = require('jquery');
import Vue from 'vue';
Vue.component('ValidationProvider', require('vee-validate'));
and attempt to call component in view:
const app = new Vue({
el:'#app',
components: {
ValidationProvider
},
data() {
return {
step:1,
registration:{
firstname:null,
lastname:null,
email:null,
street:null,
city:null,
state:null,
}
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
}
});
Console says Validationprovider is not defined... Why?

The ValidationProvider is just one component out of many exported by vee-validate, you need to import it specifically.
import Vue from 'vue';
import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);

Vue custom element error with vee-validate ValidationObserver component

I'm trying to use vee-validate to validate some inputs on this app. When trying to use the ValidationObserver custom tag I am getting this error.
[Vue warn]: Unknown custom element: <ValidationObserver> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I add it to the components in the <script> section of the .vue element.
<script>
import { ValidationObserver } from 'vee-validate';
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
data: () => ({
name: 'ValidationObserver',
components: {
ValidationObserver,
},
// code continues on from here
In case it was necessary, I also included it in the components in my main.js file where the Vue app is created. It did not fix the error.

the components option should be outside the data option :
export default {
data: () => ({
name: 'ValidationObserver',
}),
components: {
ValidationObserver,
},

Vue plugin with Typescript - Cannot read property '_init' of null

I need to create Vue plugin containing a few reusable components. I want to create this using TypeScript. There are my files:
components/SampleButton.vue
<template>
<button>Sample button</button>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'sample-button',
});
</script>
main.ts
import SampleButton from './components/SampleButton.vue';
export {
SampleButton,
};
export default {
install(Vue: any, _options: object = {}): void {
Vue.component(SampleButton.name, SampleButton);
},
};
shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
Plugin building is successful, but when I try to user the plugin in my app I get an error:
import MyPlugin from 'my-plugin'
Vue.use(MyPlugin)
Please help me find a mistake :)

How to use an external module inside a Vue SFC?

I'm new to Vue, and I'm trying to build an app which uses Typescript and vue-property-decorator. This is my first attempt to use an external module inside an SFC. I want to create a calendar component using v-calendar and render it in a page (schedule.vue).
I've done yarn add, and I'm trying to follow what the docs say about using v-calendar as a component. But as of now, when I try to render the page, there are no compilation errors yet the whole page goes blank. What's going wrong here? Any help is greatly appreciated!
// pages/schedule.vue
<template lang="pug">
VCalendar
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VCalendar from '../components/calendar.vue';
#Component({
components: {
VCalendar
}
})
export default class Schedule extends Vue {
}
// components/calendar.vue
<template lang="pug">
<v-calendar :attributes="attrs" />
</template>
<script lang="ts">
import 'v-calendar/lib/v-calendar.min.css';
import { Calendar, setupCalendar } from 'v-calendar';
import { Component, Vue } from 'vue-property-decorator';
#Component({
components: {
setupCalendar,
Calendar
}
})
export default class VCalendar extends Vue {
data() {
return {
attrs: [
{
key: 'today',
highlight: {
backgroundColor: '#ff8080',
},
dates: new Date(2018, 0, 1)
}
],
};
}
mounted():any {
setupCalendar({
firstDayOfWeek: 2,
});
}
}
</script>
I've checked these questions but I'm still lost:
How to use external vue npm components
How to include external js inside vue component

You need to register it globally using Vue.component('v-calendar',Calendar ) or in case of class based SFC you are importing Calendar a named import, then it should be used as <calendar></calendar>
#Component({ components: { setupCalendar, 'v-calendar':Calendar } }) can also be used in class based SFCs to provide a custom tag name to some imported component.