I want to translate my whole component with i18n and I don't know how to use $t() in this use case. I have data like this
[
{"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00.000000"},
{"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00.000000"}
]
I pass this data to :items="mydata" for table and I want to translate title of my fields for example I want to translate prizeCount to another language.
I am using vue-bootstrap.
What is the best solution for this?
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import i18n from './i18n'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
i18n,
template: '<App/>'
})
You can add it like this:
new Vue({
el: '#app',
router,
components: {
App
},
i18n,
t: i18n.t,
template: '<App/>'
})
Than in your component you can use $t or this.$t in your methods.
For get keys from your object you can do like this:
data: [
{"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00"},
{"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00"}
]
data.forEach( obj => {
let keys = Object.keys(obj)
// ['prizeCount', 'prizeSum', 'gameStartAt']
newData = []
newObj = {}
keys.forEach( key => {
let val = obj[key]
let trans = this.$t(key)
newObj[trans] = val
})
newData.push(newObj)
})
Related
so, I have this Vue 2 project with a global mixin:
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store";
import vuetify from "#/plugins/vuetify"; // path to vuetify export
import VueLayers from "vuelayers";
require("./assets/css/style.css");
import "vuelayers/lib/style.css"; // needs css-loader
Vue.config.productionTip = false;
Vue.use(VueLayers);
Vue.mixin({
data() {
return {
placeholderOptions: [
{
item: "ex1",
valor: 0
},
{
item: "ex2",
valor: 1
}
]
};
}
});
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
store: store,
vuetify,
components: { App },
template: "<App/>"
});
AND I have a folder with other mixins separated by file, that I can import on my components if I want. Example of mixin of this folder:
import parametros from "../mockup/parametros.json";
export default {
data() {
},
methods: {
getOptions(parametro) {
let options = [];
parametros[parametro].forEach((item, i) => {
options.push({
item: (i + 1) + " - " + item.nome,
value: i + 1
})
})
return options
}
}
}
But when I import this mixin on my component, It's like all the components in the app cannot see the global mixin anymore. I can't use more than one mixin, if one of them is a global one? Or am I doing something wrong? Here is a example of importing the mixin of my mixin's folder, having the global one.
<script>
import parametrosMixin from "../../../mixins/parametrosMixin.js";
export default {
name: "AtributosGerais",
mixins: [parametrosMixin],
...etc
};
</script>
Thanks!
So, I figured out the problem, I was declaring a data() on my mixin that was returning nothing, as you can see on the question :(
I need help pre-rendering my site. So at first, I had a fully functional site. I wanted to add pre-render-spa plugin to the server. but everything got ruined. I needed to update the Vuetify framework too. and that messed it all up. Got a lot of errors but managed to deploy the server but when I do I get this "Vuetify is not properly initialized," so I need help initialized the new Vuetify into my CLI 3 vue.
My Main.js File.
Main.js
import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/style.css';
var VueScrollTo = require('vue-scrollto');
import VueAnalytics from "vue-analytics";
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
attempt: 1,
observer: true,
})
Vue.use(VueScrollTo)
Vue.config.productionTip = false;
Vue.use(VueAnalytics, {
id: "UA-89031274-11",
autoTracking: {
screenview: true
}
});
new Vue({
router,
store,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
vue.config.js
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports.plugins.push = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
inject: false
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, './dist'),
routes: ["/"]
}),
new VuetifyLoaderPlugin()
]
}
};
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/styles/main.sass'
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi'
},
})
So this is all the file that come to relate with the pre-rendering and vuetify. I tried to reinstall vuetify and vue-cli and npm install nothing has fixed the problem that vuetify is not loading.
I saw that vuetify updated their installing documents and they said to include vuetify before the $mount("#app");
in this case the build just keep going forever and doesn't stop.
new Vue({
router,
store,
vuetify,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
Greatful for the help.
In main.js changed
import './plugins/vuetify'
to
import vuetify from './plugins/vuetify'**
and then add it into new Vue instance like this:
new Vue({
...
vuetify,
...
}).$mount('#app')
for example, 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 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
and vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
iconfont: 'md',
theme: {
primary: colors.green.darken1,
secondary: colors.green.lighten4,
accent: colors.green.darken3
}
})
Hey I have some bullshit issue with store not being defined. Any advice so I can move on and finish this software build? Store and contents of store appears in Vue Inspector tools. When put inline like below it breaks and renders blank - no DOM content inside App component.
App.vue offending excerpt
<div v-if="$store.state.showPreloader == true" id="preloaderWrap">
<div id="preloader"></div>
</div>
Store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
stuff
}
const mutations = {
stuff
}
const getters = {
stuff
}
const actions = {
stuff
}
export default new Vuex.Store({
state: state,
mutations: mutations,
getters: getters,
actions: actions
})
Main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueGraph from '../node_modules/vue-graph'
import VueMaterial from '../node_modules/vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.config.productionTip = false;
Vue.use(VueGraph);
Vue.use(VueMaterial);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
You need to init Vue with store:
new Vue({
el: '#app',
router,
store: store,
components: { App },
template: '<App/>'
})
This is the code I have given in commonValidation.js.
commonValidation.js:
this.$validator.localize('en', {
messages: {
required: (field) => '* ' + field + ' is required'
},
attributes: {
email: 'Email'
}
})
I want to call the above file in main.js inside the mounted function
like below. But it's not working. If I given those validation(from commonValidation.js) inside the mounted()(in main.js) method it's working.
main.js:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
mounted()
{
commonValidation
}
})
Please help me to call the commonValidation.Js inside the mounted() in main.js . Thanks in advance.
This is my complete commonValidation.js
export default {
mounted() {
this.$validator.localize('en', {
messages: {
required: (field) => '* ' + field + ' is required'
},
attributes: {
email: 'Email'
}
})
}
}
You are exporting an object in commonValidation.js file.
An object cannot be invoked like a function.
I think your intent is to use a mixin. A mixin is nothing but an object that contains reusable component options as its properties.
So just register the mixin on the root component in your main.js file:
//main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
mixins : [commonValidation]
}
First of all I show you what works (in App.js)
import router from './routes.js';
import VueI18n from 'vue-i18n';
const messages = {
en: {
message: {
hello: 'hello world'
}
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})
const app = new Vue({
el: '#app',
router,
i18n
});
But if I want to separate the code in lang.js
import VueI18n from 'vue-i18n';
const messages = {
en: {
message: {
hello: 'hello world'
}
}
}
export default new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
});
So that I can write in App.js
import router from './routes.js';
import i18n from './lang.js';
const app = new Vue({
el: '#app',
router,
i18n
});
But somehow this doesn't work even though routes.js is built exact the same.
My bootstrap.js looks like that, if it is important to know.
import Vue from 'vue';
window.Vue = Vue;
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';
Vue.use(VueRouter);
Vue.use(VueI18n);
I'm sorry for the long code, but somehow the mistake lies in import i18n from './lang.js';
I get the message: Uncaught TypeError: Cannot read property 'config' of undefined
In your main file where you create the app instance add the i18n as option instead of Vue.use(Vuei18n) like this:
new Vue({
el: '#app',
i18n, // < --- HERE
store,
router,
template: '<App/>',
components: { App }
})
Put it just after el;
And this should be your lang:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import fr from './fr'
import ro from './ro'
Vue.use(VueI18n)
export default new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {
en, fr, ro
}
})
Just to add a detail, you MUST construct the new VueI18n after using Vue.use(VueI18n)
Vue.use(VueI18n);
// must be called after vue.use
const i18n = new VueI18n({
locale: "en",
fallbackLocale: "en",
messages: {
en
}
});
new Vue({
el: "#app",
i18n,
render: (h) => h(App),
});
The idea of code separation can be implemented this way
/* i18n.ts */
import VueI18n from "vue-i18n";
import en from "./locales/en.json";
// Export as an arrow function
export default () =>
new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || "en",
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
messages: { en }
});
/* plugins.ts */
import Vue from "vue";
// Plugins
import VueI18n from "vue-i18n";
import i18n from "./i18n";
Vue.use(VueI18n);
export default {
i18n: i18n()
};
And finally, the main.ts
/* main.ts */
import Vue from "vue";
import plugins from "./core/plugins";
import App from "./App.vue";
new Vue({
...plugins,
render: (h) => h(App)
}).$mount("#app");
The trick is using arrow functions when exporting i18n settings. It's worth mentioning that this problem does not occur with some other Vue plugins.