Erilan

<div data-vue-widget="MyFirstWidget" data-widget-name="The Widget of The Dead"></div>
<div data-vue-widget="MyFirstWidget" data-widget-name="Beer is Good"></div>
<div data-vue-widget="MyFirstWidget" data-widget-name="Vive MontpellierJs ❤"></div>

Erilan

<template>
  <div>
    <label>Portions :</label>
    <input type="number" v-model="serving">
    <button @click="decreaseServing">-</button>
    <button @click="increaseServing">+</button>

    <div class="Recipe-IngredientList">
      <RecipeIngredient name="Farine" :serving="serving" base-value="100" metric="g"></RecipeIngredient>
      <RecipeIngredient name="Oeuf" :serving="serving" base-value="2" metric=""/>

Erilan

import Vue from 'vue'
import Vuex from 'vuex'
import functionnalStore from './store'

import MyFirstWidget from './MyFirstWidget/MyFirstWidget'
import MySecondWidget from './MySecondWidget/MySecondWidget'

Vue.use(Vuex)

export default (function () {

Erilan

import RecipeComponentsWebpack from './RecipeComponentsWebpack/Recipe'

new Vue({
  el: '.recipe-components-webpack',
  // 'h' is for hyperscript => Hyperscript itself stands for "script that generates HTML structure". It's a shortcut for DOM element creation
  render: h => h(RecipeComponentsWebpack)
})

Erilan

<template>
  <div id="app">
    <router-view v-if="isLoggedIn"></router-view>
    <TheLogin v-else @TheLogin::loginResult="handleLoginResult"/>
  </div>
</template>

<script>
import TheLogin from './components/TheLogin'

Erilan

<template>
  <div class="TheLogin">
    <h1>Login</h1>
    <div>
      <input type="text" name="username" placeholder="Username">
      <br>
      <input type="password" name="password" placeholder="Password">
      <br><br>
      <button @click="logIn">Log in</button>
    </div>

Erilan

import Vue from 'vue'
import Router from 'vue-router'

import PrivatePage from '../components/PrivatePage'

Vue.use(Router)

let routes = [
  {
    path: '/private-page',

Erilan

<template>
  <div class="PrivatePage">
    <h1>Private Page</h1>
    <p>I'm the private page !</p>
  </div>
</template>

<script>
export default {
  name: 'PrivatePage'