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);
Related
I am creating a page using Inertia.js. When I added vue-toastr in Vue template file, it doesn't work. I have no idea how to fix it. Please suggests me
This is app.js
import Vue from 'vue'
import { createInertiaApp } from '#inertiajs/inertia-vue'
import Toastr from 'vue-toastr'
Vue.use(Toastr);
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props }) {
new Vue({
render: h => h(App, props),
}).$mount(el)
},
})
This is vue template file
<script>
import Master from './Layout/Master';
export default{
name:"Home",
created(){
this.$toastr.s("success","it is working");
},
components:{Master}
};
</script>
use
the import Toastr from 'vue-toastr'
directly on your vue instance not in app.js like this :
<script>
import Master from './Layout/Master';
import Toastr from 'vue-toastr'
export default{
name:"Home",
data()
{
return
{
toastr: Toastr
}
}
,
created(){
this.$toastr.s("success","it is working");
},
components:{Master}
};
</script>
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);
Nothing I've found has fixed this issue. I am getting the following error for this Vue component. I am trying to use the Vuelidate library to validate my form. Any idea what I am missing here?
Uncaught TypeError: Cannot read property '$v' of undefined
<script>
import Vue from "vue";
import Vuelidate from "vuelidate";
import { required, minLength, email, sameAs } from "vuelidate/lib/validators";
Vue.use(Vuelidate);
const hasUpperCase = (value) =>
value.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/);
export default {
validations: {
form: {
Email: {
required: required,
isEmail: email,
},
ConfirmEmail: {
required: required,
isEmail: email,
match: sameAs(this.$v.form.Email),
},
},
},
};
</script>
My Main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
validations:{},
render: (h) => h(App)
}).$mount("#app");
First of all, install it using this command: npm install vuelidate --save
I would recommend us to define it globally by importing it in your src/main.js file like this
import Vuelidate from 'vuelidate';
Vue.use(Vuelidate)
After this is done import your validator classes into your component:
import { required, minLength, email, sameAs } from "vuelidate/lib/validators";
A good practice is to define your data models first before writing your validation, so you can do this:
data(){
return {
name:"",
email:"",
}
}
Now you can go ahead and define your validations
validations:{
name::{
required,alpha
},
email:{
required,email
}
}
One last thing you need to do is add validations:{} in your main.js file.
How can I find a way to import only a few Vuetify components to project based on Nuxt?
Without any other components or global CSS files
I am trying to do that with official docs
https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing
But got an error
Details:
// plugins/vuetify.js
import Vue from 'vue'
import Vuetify, { VCard, VRating, VToolbar } from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VCard,
VRating,
VToolbar,
},
directives: {
Ripple,
},
})
const opts = {}
export default new Vuetify(opts)
// nuxt.config.js
plugins: ['#/plugins/vuetify.js'],
Error screen
How can I redirect to another vue page from my script code. I am using router.push() but cannot redirect to my desired vue page.
Following is my source code.
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '#/components/HomePage'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'IndexPage',
component: IndexPage
},
{
path: '/homepage',
name: 'HomePage',
component: HomePage
}
]
})
src/components/IndexPage.vue
<script>
import VueRouter from 'vue-router'
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
router.push('/homepage');
//this.$router.push('/homepage');
}
}
}
}
</script>
After running this code I am getting error which states:
ReferenceError: router is not defined at eval
src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
window.Vue = Vue
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Furthermore, I can access that same link from browser http://localhost:8080/#/homepage. But cannot redirect to it from my script code.
import Vue and VueRouter
and then call
Vue.use(VueRouter)
then in your method,
this.$router.push({name: 'HomePage'})
EDIT
You need to import both Vue and Vue Router if you want to use it in your code, that's why you are getting router is not defined at eval.
And also use
this.$router.push('/homepage');
Try this in your src/components/IndexPage.vue
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
this.$router.push('/homepage');
}
}
}
}
</script>
Use your component instance property to access the router:
this.$router.push({name: 'HomePage'})
And do you have it in your app?
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Thanx for the feedback friends. I was not importing my router file on my vue. The updated line of code is:
src/components/IndexPage.vue
<script>
import router from '../router/index.js' // Just added this line and code works !!
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
router.push({name: 'HomePage'})
}
}
}
}
</script>
You can try the following code:
function redirect(page) {
window.location.href = page;
}