fixed webpack prod, fixed language prefix negociation in vue-router

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -20,9 +20,6 @@ import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Base",
-  data: () => ({
-
-  }),
   computed: {
     ...mapState({
       items: state => state.Search.items
@@ -34,19 +31,17 @@ export default {
     })
   },
   created() {
-    // laucnh a search if params exists in url query
+    // at first page load or first route entering launch a search if params exists in url query
     console.log('Base created() location',window.location);
     let params = new URLSearchParams(window.location.search)
-    if(params.has('keys')){
+    if(params.has('keys') || params.has('term')){
       this.$store.commit('Search/setKeys', params.get('keys'))
+      this.$store.commit('Search/setTerm', params.get('term'))
       this.newSearch()
     }
   },
-  // beforeRouteEnter (to, from, next) {
-  //   console.log('Base beforeRouteEnter');//, to, from, next);
-  //   next()
-  // },
   beforeRouteUpdate (to, from, next) {
+    // when query change launch a new search
     console.log('Base beforeRouteUpdate', to, from, next);
     this.$store.commit('Search/setKeys', to.query.keys)
     this.$store.commit('Search/setTerm', to.query.term)

web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

@@ -1,7 +1,8 @@
 <template lang="html">
   <div :id="id">
-    <router-view name="home" :html="home_template_src"></router-view>
-    <router-view name="base"></router-view>
+    <!-- <router-view name="home" :html="home_template_src"></router-view> -->
+    <!-- <router-view name="base"></router-view> -->
+    <router-view :html="home_template_src"/>
   </div>
 </template>
 

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -13,7 +13,8 @@ export default {
     return {
       template: null,
       typed: null,
-      autocomplete: null
+      autocomplete: null,
+      // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
     }
   },
   computed: {
@@ -24,9 +25,13 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search clicked", this.keys, this.autocomplete);
+      console.log("search clicked", this.typed, this.autocomplete);
       // New search is triggered by Base.vue with router (which will also fill the store)
       this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
+      // this.$router.push({
+      //   path:`${this.basePath}/base`,
+      //   query:{keys:this.typed,term:this.autocomplete}
+      // })
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -8,29 +8,44 @@ Vue.use(VueRouter)
 
 // https://www.lullabot.com/articles/decoupled-hard-problems-routing
 
+// We could use aliases to never reload the page on language changement
+// BUT beforeupdate is not triggered when push alias instead of path or name
+const languages = ['en', 'fr'];
+console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+const routes = [
+  {
+    name: 'home',
+    path: basePath,
+    // path: '/',
+    // alias: (() => languages.map(l => `/${l}`))(),
+    component: Home
+    // components: {
+    //   'home': Home
+    // }
+  },
+  {
+    name:'base',
+    path: `${basePath}base`,
+    // path: `/base`,
+    // alias: (() => languages.map(l => `/${l}/base`))(),
+    component: Base,
+    // components: {
+    //   'base': Base
+    // }
+  },
+  // {
+  //   path: '*',
+  //   name: 'notfound',
+  //   components: {
+  //     'notfound': NotFound
+  //   }
+  // }
+]
+
 export default new VueRouter({
   mode: 'history',
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      components: {
-        'home': Home
-      }
-    },
-    {
-      path: '/base',
-      name:'base',
-      components: {
-        'base': Base
-      }
-    },
-    // {
-    //   path: '*',
-    //   name: 'notfound',
-    //   components: {
-    //     'notfound': NotFound
-    //   }
-    // }
-  ]
+  routes: routes
 })