add router plugin & base routes file and views

app/package-lock.json

@@ -10890,6 +10890,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
+      "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

app/package.json

@@ -14,11 +14,13 @@
     "bootstrap-vue": "^2.1.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.17.3"
+    "vue-i18n": "^8.17.3",
+    "vue-router": "^3.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-router": "^4.4.6",
     "@vue/cli-service": "~4.4.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.3.1",

app/src/App.vue

@@ -1,14 +1,10 @@
 <template>
-  <div id="app">
-    <p>{{ $t('user_interface_link') }}</p>
-  </div>
+    <div id="app">
+        <nav>
+            <b-nav>
+                <b-nav-item to="/" exact exact-active-class="active">Home</b-nav-item>
+            </b-nav>
+        </nav>
+        <router-view/>
+    </div>
 </template>
-
-<script>
-export default {
-  name: 'App',
-}
-</script>
-
-<style>
-</style>

app/src/main.js

@@ -1,11 +1,14 @@
 import Vue from 'vue'
-import './plugins/bootstrap-vue'
 import App from './App.vue'
+import './plugins/bootstrap-vue'
 import i18n from './plugins/i18n'
+import router from './plugins/router'
+
 
 Vue.config.productionTip = false
 
 new Vue({
-  i18n,
-  render: h => h(App)
+    i18n,
+    router,
+    render: h => h(App)
 }).$mount('#app')

app/src/plugins/i18n.js

@@ -1,19 +1,20 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
+
 Vue.use(VueI18n)
 
 function loadLocaleMessages () {
-  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
+    const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+    const messages = {}
+    locales.keys().forEach(key => {
+        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+        if (matched && matched.length > 1) {
+            const locale = matched[1]
+            messages[locale] = locales(key)
+        }
+    })
+    return messages
 }
 
 function getBrowserLocale() {
@@ -22,13 +23,13 @@ function getBrowserLocale() {
         : navigator.language
 
     return !navigatorLocale
-        ? undefined
+        ? process.env.VUE_APP_I18N_LOCALE || 'en'
         : navigatorLocale
 }
 
 export default new VueI18n({
-  locale: getBrowserLocale(),
-  fallbackLocale: 'en',
-  // TODO : chunk locales json and lazy load them
-  messages: loadLocaleMessages()
+    locale: getBrowserLocale(),
+    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+    // TODO : chunk locales json and lazy load them
+    messages: loadLocaleMessages()
 })

app/src/plugins/router.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import routes from '../routes'
+
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})

app/src/routes.js

@@ -0,0 +1,12 @@
+import Home from './views/Home'
+
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: Home
+    },
+]
+
+export default routes

app/src/views/Home.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="home">
+    <img alt="Yunohost logo" src="../assets/logo.png">
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'Home',
+}
+</script>