vue-router 2 template

Template for vue-router 2

by karlovac

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div class="pageNavigation">
    <router-link to="/">/home</router-link>
    <router-link to="/foo">/configure</router-link>
</div>

  <router-view></router-view>
</div>

CSS

.pageNavigation {
  display: block;
  margin-bottom: 44px;
}

Babel + JSX

console.log(window.self)
const FLUID_SCRIPT = 'http://fluid-implementations.s3.amazonaws.com/lou/branch/LOU-1127/qa/assets/js/fluidConfigure-lou.min.js';
const Home = { template: '<div>Home</div>' }
const Foo = { 
	template: '<div id="fluidConfigure">FLUID</div>',
  mounted: function () {
    const tag = document.createElement('script')
    tag.src = FLUID_SCRIPT
    tag.type = 'application/javascript'
    document.head.appendChild(tag)
    this.initFluid()
  },
  methods: {
  	initFluid: function () {
    	window.configureParams={
      	product:21624,
        recipeId:81699235,
        locale:'fr_FR',
        currency:'EUR',
        number:'fr_FR',
        availabilityLocale:'fra_FR',
        secureDomainName:'secure.louisvuitton.com',
        workflow: 'prod',
        checkAnalyticsConsent: function() {return true;}

      }
    }
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})