I can use $t in components:
:label="$t('sign-up.terms-label')"
and in javascript:
case 'email':
this.errors.push(this.$t('sign-up.email-exists')); break;
But I cannot use it in extend:
import { extend, localize, ValidationObserver } from 'vee-validate';
localize({
cs: {
names: {
email: $t('sign-up.email-label'),
EsLint says that the function is undefined.
I want to localize the field names for vee-validate as described here:
https://logaretm.github.io/vee-validate/guide/localization.html#using-the-default-i18n
I18N is defined this way:
Vue.use(VueI18n);
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'cs',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'cs',
messages: loadLocaleMessages(),
});
There's an error because $t isn't defined in this scope.
As the guide shows, $t should be referred as a method on vue-i18n instance outside Vue components.
If it's defined in another module, it should be imported from a module where vue-i18n instance was exported from:
import i18n from './i18n';
...
localize({
cs: {
names: {
email: i18n.$t('sign-up.email-label'),
...
You can call extend from the created() method, at which point you will have access to this.$t.
created() {
localize({
cs: {
names: {
email: this.$t('sign-up.email-label'),
//...
}
Related
I'm trying to use my AuthentifcationService in a Vue.js component
This dependency was not found:
* #/services/AuthenticationService in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Register.vue
To install it, you can run: npm install --save #/services/AuthenticationService
Path structure: src->services.
AuthenticationService.js:
import Api from '#/services/Api'
export default {
register (credentials) {
return Api().post('register', credentials)
}
}
Register.vue
<script>
import AuthenticationService from '#/services/AuthenticationService'
export default {
data () {
return {
email: '',
password: ''
}
},
methods: {
async register () {
const response = await AuthenticationService.register({
email: this.email,
password: this.password
})
console.log(response.data)
}
}
}
</script>
Looks like you trying to use your function from AuthenticationService. But you can´t use it like a class and if you want to use it with mixins, you can´t call a function in your component the same name, as it would be overwritten.
As a mixin, you could import it like that:
import AuthenticationService from '#/services/AuthenticationService'
data () {
return {
mixins: [AuthenticationService]
}
}
Then you just call register. But note that if you import a function named register with mixins and there is also a function in your component named register, the imported function gets overwritten.
I'm getting the following error while trying to call an action from my store:
[vuex] module namespace not found in mapActions():
feedbacksessionStore/
From other solutions that I found online people were suggesting to set 'namespaced: true', however it doesn't help for my case somehow.
Here is the snippet of my store code:
export const feedbackSessionStore = {
namespaced: true,
state: {
feedback_sessions: {},
},
actions: {
async createFeedbackSession({commit, state}, { data }) {
// some code
}
}
}
And the snippet of the component code:
import { mapGetters, mapState, mapActions } from 'vuex'
// some code
export default {
name: 'create-edit-feedback-session',
methods: {
...mapActions('feedbackSessionStore', [
'createFeedbackSession'
]),
// some code
}
As a solution to this problem you have to do tow things:
make a 'feedbackSessionStore.js' as a separate module by doing this code in store/modules directory:
namespaced: true,
state: {
feedback_sessions: {},
},
actions: {
async createFeedbackSession({commit, state}, { data }) {
// some code
}
}
add this module to the store/index.js like that:
import * as feedbackSessionStore from "#/store/modules/feedbackSessionStore.js";
after these two steps it should work.
In addition to El-Hani's answer, inside your store folder there must be an index.js file which contains your store modules. In that file import the module and register it.
// store/index.js
import 'feedbackSessionStore' from './modules/feedbackSessionStore.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
feedbackSessionStore // <- Register here, and mapAction name becomes this
}
}
And check if the pointed mapAction name is exactly the same with here.
I'm using a third party multi-language package where translation values can only be obtained/used from component's template, not from component's logic (at least I can't find how to the latter).
I need to pass such translation value in some component as a default prop value:
:placeholder="{ propValue ? propValue : $t('value') }
If placeholder is explicitly specified then use that. If not, use $t('value') instead. What's the right way to write this?
I tried this in reaction to #Michael's answer:
import i18n from "#/utilities/i18n";
export default {
data() {
return {
test: i18n.t('register.agreeTermsCaptionLink')
};
}
};
Getting this error:
_utilities_i18n__WEBPACK_IMPORTED_MODULE_7__.default.t is not a function
Solution 1
Just remove brackets from prop expression: :placeholder="propValue ? propValue : $t('value')"
Sotution 2
More complicated but helps to keep templates cleaner...
where translation values can only be obtained/used from component's template, not from component's logic
With vue-i18n you can of course obtain translation directly in code by using $t function injected into your component instance like this: this.$t('key.to.translation')
Only problem is, this is not possible to use to initialize props default values because this is just not available there.
But $t in fact just returns instance function of VueI18n global object. So if you setup your VueI18n like this:
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
en: {
messages: {
placeholder: "Placeholder"
}
},
cz: {
messages: {
placeholder: "Zástupný symbol :)"
}
}
};
export default new VueI18n({
locale: "en",
messages
});
You can do this to provide translation as default value of your prop:
import i18n from "../i18n";
export default {
name: "HelloWorld",
props: {
placeholder: {
type: String,
// default: this.$t("value") - Wont work as `this` is not Vue instance
default: i18n.t("messages.placeholder")
}
}
};
Demo
You can set default value to prop like this:
props: {
propValue: {
type: String,
default: this.$t('value')
}
}
With that in your template you need just to assign that value like: :placeholder="propValue"
Is that what you trying to achive?
Good luck!
I am currently working on a Vue project including multiple applications.
It has project-wide used methods and application-wide used methods.
Therefore, I created 2 mixins which need to be available in every Vue component. However, I don't know how to implement it using Vue.mixin().
Please help.
I tried this. Not work..
The error says "Cannot read property 'VALIDATION' of undefined".
Somehow URL is not imported. URL() returns a object where urls are defined according to either DEV or PRODUCTION mode.
import global_mixin from './global_mixin.js'
import application_mixin from './application_mixin.js'
Vue.mixin(global_mixin)
Vue.mixin(application_mixin)
new Vue({
el: '#app',
render: h => h(App)
})
global_mixin.js
export default {
data() {
return {
// data items
}
}
}
application_mixin.js
import { URL } from './_util'
export default {
data() {
return {
URL_VALIDATION: URL().VALIDATION
}
}
}
_util.js
import store from './_store'
export const URL = () => {
const urls = {
PROD: {
VALIDATION: '/api/web/company/profile/validation',
PROFILE: '/api/web/company/profile',
COUNTRY: '/api/app/countries',
ADDRESS: '/api/web/address'
},
DEV: {
PROFILE: '/data/profile_company.json',
VALIDATION: 'https://httpbin.org/post',
COUNTRY: '/data/countries.json',
ADDRESS: '/data/zip.json'
}
}
return urls[store.getters.mode]
}
Error:
[Vue warn]: Property or method "$v" 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. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> at resources\assets\js\components\products\Product_create.vue
I'm using Vue.js and Vuelidate as validator,
I've copied and pasted this code from here https://jsfiddle.net/Frizi/b5v4faqf/ but it still doesn't work :
Vue Component :
<template >
<input v-model="$v.text.$model" :class="status($v.text)">
<!-- <pre>{{ $v }}</pre> -->
</template>
<script>
import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
data() {
return {
text: ''
}
},
validations: {
text: {
required,
minLength: minLength(5)
}
},
methods: {
status(validation) {
return {
error: validation.$error,
dirty: validation.$dirty
}
}
}
}
</script>
App.js
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter = require('vue-router').default;
window.VueAxios = require('vue-axios').default;
window.Axios = require('axios').default;
window.VueFormWizard = require('vue-form-wizard');
window.Vuelidate = require('vuelidate').default;
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueRouter,VueAxios,axios,VueFormWizard,Vuelidate);
const ProductOptionCreate = Vue.component('po-create',require('./components/products/ProductOption_create.vue'));
const ProgressModal = Vue.component('vue-modal',require('./components/ProgressModal.vue'));
const ProductIndex = Vue.component('product-list',require('./components/products/Product_index.vue'));
const productshow = Vue.component('productshow',require('./components/products/ProductOption_show.vue'));
const ProductCreate = Vue.component('product-create',require('./components/products/Product_create.vue'));
const app = new Vue({
el:'#app',
});
What's wrong with this code?
The problem is that $v is not defined at a component level, and it is because of the order of your components, you need to reorder them like so:
// ... other stuff
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(Vuelidate);
const ProductOptionCreate = // ... rest of your components
I think the problem was that the validation was declared within the data property of the component and not as a direct property of the component.
So
export default {
validations: {
text: {
required,
minLength: minLength(5)
},
data() {
return {
text: ''
}
},
},
........
instead of
export default {
data() {
return {
text: ''
}
},
validations: {
text: {
required,
minLength: minLength(5)
}
The reason $v is not available on your instance is because you haven't instantiated the Vuelidate plugin. And that's because you tried to streamline the call to Vue.use().
Your current Vue.use() call only instantiates the first plugin (VueRouter) and passes VueAxios plugin object as VueRouter's config object. All subsequent arguments are ignored.
To streamline your calls to Vue.use(), you can't simply add more arguments to it.
Instead of this erroneous syntax (which breaks instantiation of all but first plugin):
Vue.use(VueRouter, VueAxios, axios, VueFormWizard, Vuelidate);
... you could use:
[[VueRouter], [VueAxios, axios], [VueFormWizard], [Vuelidate]]
.forEach(args => Vue.use(...args));
With Typescript: unfortunately, TS parser wrongly includes 0 arguments as a possible outcome of the spread operator in the above case, so you'd need to suppress it using:
[
[VueRouter],
[VueAxios, axios],
[VueFormWizard],
[Vuelidate]
/* #ts-ignore: TS2557, TS wrong about array above having empty members */
].forEach(args => Vue.use(...args));
... at least for now ("typescript": "^3.9.7").
The above syntax is the exact equivalent of:
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.use(VueFormWizard);
Vue.use(Vuelidate); // <= this is what you were missing, basically
// but your syntax also broke VueAxios and VueFormWizard install
On a personal note: although a tad more repetitive, I actually find the Vue.use() syntax cleaner in this case (more readable).
The validations should be defined in a component in order to initialize this.$v
I had a typo and didn't realized I was declaring validations inside methods.
methods: {
validations: {
isUScitizen: { required },
},
}
And I was trying to access this.$v which was undefined because the component didn't had validations defined.
You must specify this.$v and there will be no error