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,
},
Related
I use vueup/vue-quill for Vue 3 and want to use kensnyder/quill-image-drop-module.
This is my code :
Main.js
import { QuillEditor } from '#vueup/vue-quill';
import '#vueup/vue-quill/dist/vue-quill.snow.css';
import Quill from 'quill';
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop)
createApp(App).component('QuillEditor', QuillEditor).mount('#app')
Editor.vue
<template>
<QuillEditor :modules="modules" theme="snow" />
</template>
<script>
import { QuillEditor } from '#vueup/vue-quill';
import '#vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
QuillEditor,
},
data() {
return {
modules: {
imageDrop: true,
},
};
}
}
</script>
If I run the code above, I got an error :
How to fix this error?
Are quill-image-drop-module works on Vue 3?
Provide to <QuillEditor> a prop called toolbar (ex. toolbar='minimal').
vue-quill is creating options for Quill and only when toolbar prop is present it creates an object key modules that it uses to register other modules.
I'm new to Vue CLI, and I'm trying to build a small application. As part of this I want to generate some forms.
I've tested a few libraries, and NCForms seems to do all I need to do. (specifically, I need to handle capturing of multiple arrays).
I tried to initialize the library as described in the documentation - but it fails in the Template saying that it can't find some of the element-ui components.
I'm pretty sure that I've followed the instructions properly - but I must be missing something small.
My main.js file looks like this:
import 'ant-design-vue/lib/style/index.less' // antd core styles
import './#kit/vendors/antd/themes/default.less' // default theme antd components
import './#kit/vendors/antd/themes/dark.less' // dark theme antd components
import './global.scss' // app & third-party component styles
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import NProgress from 'vue-nprogress'
import VueLayers from 'vuelayers'
import BootstrapVue from 'bootstrap-vue'
import VueFormulate from '#braid/vue-formulate'
// Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'
// Form generator: NCForms: https://github.com/ncform/ncform
import vueNcform from '#ncform/ncform'
// eslint-disable-next-line no-unused-vars
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ncformStdComps from '#ncform/ncform-theme-elementui'
// REST Calls: Axios: https://github.com/axios/axios
import axios from 'axios'
// Local files
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './localization'
import './antd'
import './registerServiceWorker'
// mocking api
import './services/axios/fakeApi'
Vue.use(BootstrapVue)
Vue.use(VueLayers)
Vue.use(NProgress)
Vue.use(VuePageTitle, {
prefix: 'Nedbank PhishTank | ',
router,
})
// Form generator: Vue-Form-Generator
Vue.use(VueFormGenerator)
// Form generator: NCForms
Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
window.$http = Vue.prototype.$http = axios
Vue.use(VueFormulate)
Vue.config.productionTip = false
const nprogress = new NProgress({ parent: 'body' })
new Vue({
router,
store,
nprogress,
i18n,
render: h => h(App),
}).$mount('#app')
My template looks like this:
<template>
<div>
<ncform :form-schema="formSchema" form-name="settings-form" v-model="item" #submit="submit()"></ncform>
<el-button #click="submit()">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string',
},
},
},
item: {
name: 'Peter Pan',
},
}
},
methods: {
submit () {
this.$ncformValidate('settings-form').then(data => {
if (data.result) {
console.log(this.$data.formSchema.value)
// do what you like to do
alert('finally!!!')
}
})
},
},
}
</script>
The error is:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Am I missing something like registering the individual components? I thought this line would take care of it: Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
It feels like I should put something into the "new Vue()" statement - but I'm not sure what....
In main.js, you need to specify: Vue.use(Element);
In my MVC project i am using Vue3 with Vuex4 and they are working but i have got one issue with mapState.
if I use these import statements i am getting this error:
import Vue from 'vue';
import Vuex from 'vuex';
1 Uncaught SyntaxError: Cannot use import statement outside a module
So i add these files in my _Layout page to fix it
<script src="~/lib/vue/vue.global.js"></script>
<script src="~/lib/vuex/vuex.global.js"></script>
So far it is working. But when i want to use mapState, i am stack! not sure how to fix it,
import { mapState } from 'vuex';
I searched for mapStaate.js file but couldn't find or the files i find has just few lines of code and not working...
const store = new Vuex.Store({
state: {
count: 0
}
})
const homeIndex = {
data() {
return {
}
},
computed: mapState({
count: state => state.count,
})
}
Vue.createApp(homeIndex).mount("#app");
The import statement is for modules. You don't need the module syntax since you are loading the scripts directly. Remove the import statement and use Vuex.mapState like you used Vuex.Store:
computed: Vuex.mapState({
count: state => state.count,
})
If you prefer, you can use object destructuring to give a similar appearance to imports. Then you could use mapState as you did in the question:
const { mapState, mapGetters, mapActions } = Vuex;
computed: mapState({
count: state => state.count,
})
I'm having trouble printing out the data from Twig template on my Symfony app. I am using Vue.js with TypeScript enabled.
main.ts:
import HeaderNav from './components/HeaderNav.vue'
new HeaderNav({el: '.headnav'});
HeaderNav.vue:
<template>
<div class="headnav headnav-fixed z-depth-1">
{{test}}
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Emit, Prop, Watch } from 'vue-property-decorator';
#Component({
props: {
test: {
type: String,
default: "{}"
}
},
mounted: function () {
console.log(this.test);
}
})
export default class HeaderNav extends Vue {}
</script>
header.html.twig:
<div class="headnav" data-test="hello"></div>
I get this error while compiling:
Property 'test' does not exist on type 'Vue'.
Any ideas that am I doing wrong? I am thinking that calling the component HeaderNav first might be the problem, because it instantly overrides the element with class 'headnav', but I am trying to create the components only for separate elements on my site, I don't want to put whole application into Vue.js.
I hope the problem is with you defined props.
In Vue with typescript you need to use props like this:
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component({
name: "HeaderNav"
})
export default class HeaderNav extends Vue {
#Prop({ default: '' }) test!: string;
created(){
console.log(this.test)
}
}
I hope this will help you.
For more information checkout this article: https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/
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.