Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-27 08:02:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix i18n example

Browse Source
This commit is contained in:
Sébastien Chopin 2017-02-10 12:55:51 +01:00
parent c961ba7729
commit 2c7eecace7
3 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/i18n/layouts/default.vue
View File

@ -4,16 +4,16 @@
<div class="container"> <div class="container">
<h1 class="Header__Title">Nuxt i18n</h1> <h1 class="Header__Title">Nuxt i18n</h1>
<nav class="Header__Menu"> <nav class="Header__Menu">
<nuxt-link class="Header__Link" :to="path('/')"> <nuxt-link class="Header__Link" :to="path('/')" exact>
{{ $t('links.home') }} {{ $t('links.home') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" :to="path('/about')"> <nuxt-link class="Header__Link" :to="path('/about')">
{{ $t('links.about') }} {{ $t('links.about') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" v-if="$store.state.lang.lang === 'en'" to="/fr"> <nuxt-link class="Header__Link" v-if="$store.state.lang.lang === 'en'" :to="`/fr` + $route.fullPath" active-class="none">
{{ $t('links.french') }} {{ $t('links.french') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" v-else to="/"> <nuxt-link class="Header__Link" v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" active-class="none">
{{ $t('links.english') }} {{ $t('links.english') }}
</nuxt-link> </nuxt-link>
</nav> </nav>
@ -94,4 +94,7 @@ html, body
color: #2e2f30; color: #2e2f30;
background-color: #fff; background-color: #fff;
} }
.nuxt-link-active {
color: cyan;
}
</style> </style>

59
examples/i18n/layouts/error.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="error-page">
<div>
<h1 class="error-code">{{ error.statusCode }}</h1>
<div class="error-wrapper-message">
<h2 class="error-message">{{ error.message }}</h2>
</div>
<p v-if="error.statusCode === 404"><nuxt-link class="error-link" to="/">Back to the home page</nuxt-link></p>
</div>
</div>
</template>
<script>
export default {
props: ['error'],
head () {
return {
title: this.error.message || 'An error occured'
}
}
}
</script>
<style scoped>
.error-page {
color: #000;
font-family: "SF UI Text", "Helvetica Neue", "Lucida Grande";
text-align: center;
padding-top: 20%;
}
.error-code {
display: inline-block;
font-size: 24px;
font-weight: 500;
vertical-align: top;
border-right: 1px solid rgba(0, 0, 0, 0.298039);
margin: 0px 20px 0px 0px;
padding: 10px 23px;
}
.error-wrapper-message {
display: inline-block;
text-align: left;
line-height: 49px;
height: 49px;
vertical-align: middle;
margin-bottom: 20px;
}
.error-message {
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
.error-link {
color: #000;
font-weight: normal;
font-size: 14px;
}
</style>

3
examples/i18n/middleware/i18n.js
View File

@ -1,7 +1,8 @@
export default async function ({ store, params, error }) { export default async function ({ store, params, error }) {
const lang = params.lang || 'en' const lang = params.lang || 'en'
if (!store.state.lang.locales.includes(lang)) { if (!store.state.lang.locales.includes(lang)) {
await store.dispatch('lang/setLang', 'en')
return error({ message: 'Page not found', statusCode: 404 }) return error({ message: 'Page not found', statusCode: 404 })
} }
return store.dispatch('lang/setLang', lang) await store.dispatch('lang/setLang', lang)
} }