Skip to content

Commit

Permalink
Add vue-i18n to project
Browse files Browse the repository at this point in the history
  • Loading branch information
daniegarcia254 committed Jun 6, 2017
1 parent 160554e commit 6faf91f
Show file tree
Hide file tree
Showing 8 changed files with 223 additions and 124 deletions.
158 changes: 81 additions & 77 deletions package.json
@@ -1,79 +1,83 @@
{
"name": "Login",
"version": "1.0.0",
"description": "Login app template with Framework7 + Vue + Webpack2 + Cordova",
"license": "MIT",
"scripts": {
"hot-dev": "cordova run browser -- --lr",
"hot-dev-ios": "cordova run ios -- --lr && npm run hot-dev",
"hot-dev-android": "cordova run android -- --lr && npm run hot-dev",
"generate-icon-splash": "splashicon-generator --imagespath='src/static'"
},
"repository": {
"type": "git",
"url": "git+https://github.com/daniegarcia254/Framework7-Vue-Webpack-Cordova.git"
},
"keywords": [
"ios",
"webpack",
"framework7",
"vue",
"vuejs",
"material",
"mobile",
"app",
"f7"
],
"dependencies": {
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.2",
"framework7": "1.6.0",
"framework7-icons": "^0.8.9",
"framework7-vue": "^0.9.1",
"nunito-fontface": "^0.7.1",
"vue": "^2.3.3"
},
"devDependencies": {
"cheerio": "^0.22.0",
"chokidar": "^1.6.1",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.27.3",
"device.js": "git+https://github.com/matthewhudson/device.js.git",
"epipebomb": "^1.0.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"path": "^0.12.7",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"svg-url-loader": "^2.0.2",
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
"uglifyjs-webpack-plugin": "^0.3.0",
"url-loader": "^0.5.8",
"vue-hot-reload-api": "^2.0.11",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.1.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.2.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserlist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-splashscreen": {}
"name": "Login",
"version": "1.0.0",
"description": "Login app template with Framework7 + Vue + Webpack2 + Cordova",
"license": "MIT",
"scripts": {
"hot-dev": "cordova run browser -- --lr",
"hot-dev-ios": "cordova run ios -- --lr && npm run hot-dev",
"hot-dev-android": "cordova run android -- --lr && npm run hot-dev",
"generate-icon-splash": "splashicon-generator --imagespath='src/static'"
},
"platforms": []
}
}
"repository": {
"type": "git",
"url": "git+https://github.com/daniegarcia254/Framework7-Vue-Webpack-Cordova.git"
},
"keywords": [
"ios",
"webpack",
"framework7",
"vue",
"vuejs",
"material",
"mobile",
"app",
"f7"
],
"dependencies": {
"cordova-browser": "^4.1.0",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.2",
"framework7": "1.6.0",
"framework7-icons": "^0.8.9",
"framework7-vue": "^0.9.1",
"nunito-fontface": "^0.7.1",
"vue": "^2.3.3",
"vue-i18n": "^7.0.1"
},
"devDependencies": {
"cheerio": "^0.22.0",
"chokidar": "^1.6.1",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.27.3",
"device.js": "git+https://github.com/matthewhudson/device.js.git",
"epipebomb": "^1.0.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"path": "^0.12.7",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"svg-url-loader": "^2.0.2",
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
"uglifyjs-webpack-plugin": "^0.3.0",
"url-loader": "^0.5.8",
"vue-hot-reload-api": "^2.0.11",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.1.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.2.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserlist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-splashscreen": {}
},
"platforms": [
"browser"
]
}
}
14 changes: 8 additions & 6 deletions src/assets/vue/pages/login.vue
Expand Up @@ -10,20 +10,22 @@
<!-- Login form -->
<f7-list form>
<f7-list-item>
<f7-input type="text" autofocus required placeholder="Email"></f7-input>
<f7-input type="text" v-bind:placeholder="$t('login.placeholders.email')" autofocus required></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="password" required placeholder="Password"></f7-input>
<f7-input type="password" v-bind:placeholder="$t('login.placeholders.password')" required></f7-input>
</f7-list-item>
</f7-list>

<!-- Terms and conditions -->
<f7-block id="terms-and-conditions">
<f7-grid center>
<f7-col>
<span>When Sign Up or Log in, you accept our<br>
<f7-link>Terms and Conditions</f7-link> and
our <f7-link>Privacy Policy</f7-link></span>
<span>{{ $t("login.terms_and_privacy.message") }}<br>
<f7-link>{{ $t("login.terms_and_privacy.terms") }}</f7-link>
{{ $t("login.terms_and_privacy.conj") }}
<f7-link>{{ $t("login.terms_and_privacy.privacy") }}</f7-link>
</span>
</f7-col>
</f7-grid>
</f7-block>
Expand All @@ -33,7 +35,7 @@
<f7-grid center>
<f7-col>
<f7-button big fill id="login-btn">
<span>Log in</span>
<span>{{ $t("login.btn") }}</span>
</f7-button>
</f7-col>
</f7-grid>
Expand Down
18 changes: 10 additions & 8 deletions src/assets/vue/pages/register.vue
Expand Up @@ -12,15 +12,15 @@
<f7-col width="100" tablet-width="50">
<f7-list form>
<f7-list-item>
<f7-input type="text" autofocus required placeholder="Name and Surname"></f7-input>
<f7-input type="text" v-bind:placeholder="$t('register.placeholders.name')" autofocus required></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="text" autofocus required placeholder="Email"></f7-input>
<f7-input type="text" v-bind:placeholder="$t('register.placeholders.email')" required></f7-input>
</f7-list-item>
<f7-list-item>
<f7-input type="password" required placeholder="Password"></f7-input>
<f7-input type="password" v-bind:placeholder="$t('register.placeholders.password') "required></f7-input>
</f7-list-item>
<f7-label>(Password should be at least 8 characters length)</f7-label>
<f7-label>{{ $t("register.password.conditions") }}</f7-label>
</f7-list>
</f7-col>
</f7-grid>
Expand All @@ -29,9 +29,11 @@
<f7-block id="terms-and-conditions">
<f7-grid center>
<f7-col>
<span>When Sign Up or Log in, you accept our<br>
<f7-link>Terms and Conditions</f7-link> and
our <f7-link>Privacy Policy</f7-link></span>
<span>{{ $t("register.terms_and_privacy.message") }}<br>
<f7-link>{{ $t("register.terms_and_privacy.terms") }}</f7-link>
{{ $t("register.terms_and_privacy.conj") }}
<f7-link>{{ $t("register.terms_and_privacy.privacy") }}</f7-link>
</span>
</f7-col>
</f7-grid>
</f7-block>
Expand All @@ -41,7 +43,7 @@
<f7-grid center>
<f7-col>
<f7-button big fill id="register-btn">
<span>Sign Up</span>
<span>{{ $t("register.btn") }}</span>
</f7-button>
</f7-col>
</f7-grid>
Expand Down
44 changes: 44 additions & 0 deletions src/i18n/en.json
@@ -0,0 +1,44 @@
{
"main": {
"login":{
"fb": "Log in with Facebook",
"email": "Log in with your email"
},
"or":"or",
"register":{
"title":"Register now!",
"message":"It's free and you will have<br>access to all the features",
"btn":"Don't have an account? Register!"
}
},
"login":{
"placeholders":{
"email":"Email",
"password":"Password"
},
"terms_and_privacy":{
"message": "When Sign Up or Log in, you accept our",
"terms":"Terms and Condition",
"conj": " and our ",
"privacy":"Privacy Policy"
},
"btn": "Log in"
},
"register":{
"placeholders":{
"name":"Name and Surname",
"email":"Email",
"password":"Password"
},
"password":{
"conditions":"(Password should be at least 8 characters length)"
},
"terms_and_privacy":{
"message": "When Sign Up, you accept our",
"terms":"Terms and Condition",
"conj": " and our ",
"privacy":"Privacy Policy"
},
"btn": "Sign Up"
}
}
44 changes: 44 additions & 0 deletions src/i18n/es.json
@@ -0,0 +1,44 @@
{
"main": {
"login":{
"fb": "Entrar con Facebook",
"email": "Entrar con email"
},
"or": "o",
"register":{
"title":"¡Regístrate ahora!",
"message":"Es gratis y tendrás acceso<br>a todas las características",
"btn":"¿No tienes cuenta? ¡Regístrate!"
}
},
"login":{
"placeholders":{
"email":"Email",
"password":"Contraseña"
},
"terms_and_privacy":{
"message": "Al acceder con tu cuenta, aceptas nuestros",
"terms":"Términos y Condiciones",
"conj": " y nuestra ",
"privacy":"Política de Privacidad"
},
"btn": "Entrar"
},
"register":{
"placeholders":{
"name":"Nombre y apellidos",
"email":"Email",
"password":"Contraseña"
},
"password":{
"conditions":"(La contraseña debe tener al menos 8 caracteres)"
},
"terms_and_privacy":{
"message": "Al registrarte, aceptas nuestros",
"terms":"Términos y Condiciones",
"conj": " y nuestra ",
"privacy":"Política de Privacidad"
},
"btn": "Registrar"
}
}
25 changes: 25 additions & 0 deletions src/i18n/index.js
@@ -0,0 +1,25 @@
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

console.log("LANGUAGE", window.navigator.userLanguage || window.navigator.language);

const i18n = new VueI18n({
locale: window.navigator.userLanguage || window.navigator.language,
fallbackLocale: 'en',
messages: {
'en': require('./en.json'),
'es': require('./es.json')
}
});

if (module.hot) {
module.hot.accept(['./en.json', './es.json'], () => {
i18n.setLocaleMessage('en', require('./en.json'));
i18n.setLocaleMessage('es', require('./es.json'));
console.log('hot reload', this, arguments);
});
}

export default i18n;
6 changes: 5 additions & 1 deletion src/main.js
@@ -1,6 +1,9 @@
// Import Vue
import Vue from 'vue'

// Import Vue-i18n
import i18n from './i18n'

// Import F7
import Framework7 from 'framework7'

Expand Down Expand Up @@ -37,6 +40,7 @@ Vue.use(Framework7Vue)
new Vue({
el: '#app',
template: '<app/>',
i18n,
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
Expand All @@ -48,4 +52,4 @@ new Vue({
components: {
app: App
}
})
});

0 comments on commit 6faf91f

Please sign in to comment.