Verified Commit 3b0b3038 authored by Frauke's avatar Frauke

Initial commit

parents
# editorconfig.org
root = true
[*]
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {}
}
# dependencies
node_modules
# logs
npm-debug.log
# Nuxt build
.nuxt
# Nuxt generate
dist
# nuxt-i18n
> Nuxt.js project
A project that tests the implementation of nuxt-i18n.
## Conclusion
As the doumentation stated: nuxt-i18n overrides Nuxt default routes to add locale prefixes to every URL.<br/>
So it is not possible to ommit the language prefix from the URL.
## Build Setup
``` bash
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
```
For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
# ASSETS
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/assets#webpacked
**This directory is not required, you can delete it if you don't want to use it.**
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two"/>
<div class="Triangle Triangle--one"/>
<div class="Triangle Triangle--three"/>
<div class="Triangle Triangle--four"/>
</div>
</template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
transform: rotateX(180deg);
position: relative;
overflow: hidden;
height: 180px;
width: 245px;
}
.Triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.Triangle--one {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 180px solid #41B883;
}
.Triangle--two {
top: 30px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent;
border-bottom: 150px solid #3B8070;
}
.Triangle--three {
top: 60px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #35495E;
}
.Triangle--four {
top: 120px;
left: 70px;
animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #fff;
}
@keyframes turn {
100% {
transform: rotateX(0deg);
}
}
@keyframes godown {
100% {
top: 180px;
}
}
@keyframes goright {
100% {
left: 70px;
}
}
</style>
# COMPONENTS
The components directory contains your Vue.js Components.
Nuxt.js doesn't supercharge these components.
**This directory is not required, you can delete it if you don't want to use it.**
# LAYOUTS
This directory contains your Application Layouts.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/views#layouts
**This directory is not required, you can delete it if you don't want to use it.**
<template>
<div>
<nuxt/>
</div>
</template>
<style>
html {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
# MIDDLEWARE
This directory contains your Application Middleware.
The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/routing#middleware
**This directory is not required, you can delete it if you don't want to use it.**
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'nuxt-i18n',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
modules: [
['nuxt-i18n', {
locales: [
{
code: 'en',
iso: 'en-BE',
name: 'English'
},
{
code: 'nl',
iso: 'nl-BE',
name: 'Nederlands'
}
],
defaultLocale: 'en',
vueI18n: {
messages: {
nl: {
home: 'Home',
about: 'Over',
category: 'Categorie'
},
en: {
home: 'Homepage',
about: 'About us',
category: 'Category'
}
},
fallbackLocale: 'en'
}
}],
]
}
This diff is collapsed.
{
"name": "spike-nuxt-i18n",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "Frauke <frauke.vanderzijpen@digipolis.gent>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"nuxt": "^1.0.0",
"nuxt-i18n": "^2.2.4"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0"
}
}
# PAGES
This directory contains your Application Views and Routes.
The framework reads all the .vue files inside this directory and creates the router of your application.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/routing
<template>
<section class="container">
<ul>
<li><nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link></li>
<li><nuxt-link :to="localePath('about')">{{ $t('about') }}</nuxt-link></li>
<li><nuxt-link :to="localePath('category')">{{ $t('category') }}</nuxt-link></li>
<li><nuxt-link :to="localePath('index', 'en')">Homepage in English</nuxt-link></li>
<li><nuxt-link :to="localePath('index', 'nl')">Homepage in Nederlands</nuxt-link></li>
</ul>
<ul>
<li><nuxt-link :to="switchLocalePath('en')">English</nuxt-link></li>
<li><nuxt-link :to="switchLocalePath('nl')">Nederlands</nuxt-link></li>
</ul>
<ul>
<li v-for="(locale, index) in $i18n.locales" :key="index">
<nuxt-link
v-if="locale.code !== $i18n.locale"
:exact="true"
:to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
</li>
</ul>
</section>
</template>
<script>
export default {
}
</script>
<style>
ul {
margin: 2rem 0
}
</style>
\ No newline at end of file
<template>
<section class="container">
<nuxt-link
v-for="(locale, index) in $i18n.locales"
v-if="locale.code !== $i18n.locale"
:key="index"
:exact="true"
:to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
<ul>
<li><nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link></li>
<li><nuxt-link :to="localePath('about')">{{ $t('about') }}</nuxt-link></li>
<li><nuxt-link :to="localePath('category')">{{ $t('category') }}</nuxt-link></li>
</ul>
</section>
</template>
<script>
export default {
}
</script>
\ No newline at end of file
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
nuxt-i18n
</h1>
<h2 class="subtitle">
Nuxt.js project
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
export default {
components: {
AppLogo
}
}
</script>
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
# PLUGINS
This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/plugins
**This directory is not required, you can delete it if you don't want to use it.**
# STATIC
This directory contains your static files.
Each file inside this directory is mapped to /.
Example: /static/robots.txt is mapped as /robots.txt.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/assets#static
**This directory is not required, you can delete it if you don't want to use it.**
# STORE
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a index.js file in this directory activate the option in the framework automatically.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/vuex-store
**This directory is not required, you can delete it if you don't want to use it.**
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment