I'm building a custom Vue JS plugin using the vue create CLI. I've imported my various packages, however, I'm getting an error when trying to use custom settings with VeeValidate.
plugin.js
/*
* NOTE:
* This file is plugin stub for main.js
*/
// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
// Import custom LES form styling
import './assets/scss/les-application.scss'
// Import our plugin
import plugin from './index'
/* Vue Validation */
const config = {
fieldsBagName: 'fields',
errorBagName: 'errors',
classes: true,
strict: false,
classNames: {
valid: '',
invalid: 'is-invalid'
},
events: 'change|blur',
validity: false,
inject: false,
aria: true,
delay: 0
}
Vue.use(require('vue-moment'))
Vue.use(VueResource)
Vue.use(VeeValidate, config)
Vue.use(plugin)
// Custom validation rules
/*
* NOTE:
* If you want Vue instance of main.js to import something in your plugin as a Vue option,
* you need to export it here.
*/
// export default plugin
main.js
import Vue from 'vue'
import App from './App.vue'
import './plugin'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Errors:
Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
and
Cannot read property 'has' of undefined
I'm trying to figure out what I'm missing from my configuration, if I remove the VeeValidate config from plugin.js it then uses the default VeeValidate options and is working.
It is the inject: false, in the validation config causing this. if you set this to true or do not set it, the errors object should be injected in your component without errors.
The inject:false stops automatic injections in vee-validate 2 http://vee-validate.logaretm.com/v2/concepts/injections.html
This changes with vee-validate 3 where ValidationObserver and ValidationProvider need to be used https://logaretm.github.io/vee-validate/migration.html#migrating-from-2-x-to-3-0
Related
I want to change this Vue Material prefix tags "md-":
<md-button>{{title1}}</md-button>
to:
<custom-button>{{title1}}</custom-button>
After looking at the vue-material source code, All the components specify the 'name' attribute manually. You can see an example of that in the code for MdAutocomplete.
You could change the name: 'MdAutocomplete', to name: 'CustomAutocomplete', for each of the files.
There's also a bit of a messier approach that you could take using Vue's async components system. After doing the normal vue-material setup process:
import Vue from 'vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)
You can specify custom component aliases like so:
import Vue from "vue"
export default {
components: {
CustomButton: () => Promise.resolve(Vue.component('MdButton'))
},
// ...
}
I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.
When I run npm test this error displays for every BootsrapVue html element.
console.error
[Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
<Root>
How can I prevent this?
You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.
Create the setup file:
// #/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Then configure Jest's setupFiles to load it:
// #/jest.config.js
module.exports = {
setupFiles: ['./jest-setup.js'],
}
global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
i want add a vue panel in my project : vue-black-dashboard
in documentation :
Vue Black Dashboard is built as Vue plugin so you can simply import it
and use it.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
but i dont know where paste vue-black-dashboard folder
how i can import it to my project
thanks
If you want to import it and use in a local component, just import it in component.
<script>
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
export default {
}
</script>
If you want to import it and use globally, just import it in main.js.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
hello thanks for your answer
import DashboardPlugin from '#/plugins/blackDashboard'
where is the # in this address ?
i want use this template in specify route of my project
when i import it in main.js
This dependency was not found:
#/plugins/blackDashboard in ./src/main.js
To install it, you can run: npm install --save
#/plugins/blackDashboard
How's your plugin file look like? I have a similar issue with having plugins in separate files in /plugins directory and importing them to main.js
What I'm trying to achieve is better structure of plugins to keep them in separate files in folder plugins, rather than storing all the code in main.js
Not sure is it allowed or is it a good practice.
Plugins folder: plugins/toastification.js
import Vue from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const options = {
position: 'bottom-right'
}
Vue.use(Toast, options)
// export default new Toast() - got error while exporting but it works somehow without export default I don't know why
Part of main.js
// plugins
import vuetify from './plugins/vuetify'
import i18n from './plugins/i18n'
import toastification from './plugins/toastification'
import logger from './plugins/logger'
new Vue({
vuetify,
i18n,
toastification,
logger,
render: h => h(App)
}).$mount('#app')
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.