integrated vuejs into theme (builded with webpack

web/themes/custom/materiotheme/vuejs/components/Login.vue

@@ -0,0 +1,76 @@
+<template lang="html">
+  <div id="block-userlogin" class="">
+    <h2>Login Hello!</h2>
+    <section>
+      <input
+        id="edit-name"
+        class="form-email"
+        type="text"
+        placeholder="Email" name="name"
+        v-model="mail"
+        @keyup.enter="login"/>
+      <input
+        id="edit-pass"
+        class="form-text"
+        type="password"
+        placeholder="Password" name="pass"
+        v-model="password"
+        @keyup.enter="login"
+      />
+      <button
+        id="edit-submit"
+        class="button"
+        @click.stop="login"
+      >
+        login
+      </button>
+    </section>
+  </div>
+</template>
+
+<script>
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  data () {
+    return {
+      mail: '',
+      password: ''
+    }
+  },
+  computed: {
+    ...mapState(['User']),
+    // ...mapState({
+    //   isloggedin: state => state.user.isloggedin,
+    //   username: state => state.user.username,
+    //   token: state => state.user.token
+    // })
+  },
+  methods: {
+    ...mapActions({
+      getToken: 'User/getToken'
+    }),
+
+    // usernameInputHandler(input) {
+    //     this.username = input;
+    // },
+    // passwordInputHandler(input) {
+    //     this.password = input;
+    // },
+
+    login () {
+      this.getToken({
+        mail: this.mail,
+        pass: this.password
+      })
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

web/themes/custom/materiotheme/vuejs/rest/http-axios.js

@@ -0,0 +1,10 @@
+import axios from 'axios'
+
+// console.log('drupalSettings', drupalSettings);
+
+export const HTTP = axios.create({
+  baseURL: `http://dev.materio.com`,
+  headers: {
+    Authorization: 'Bearer {token}'
+  }
+})

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

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import User from './modules/user'
+
+// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
+
+Vue.use(Vuex)
+export default new Vuex.Store({
+  modules: {
+    User
+  }
+})

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -0,0 +1,59 @@
+import { HTTP } from 'vuejs/rest/http-axios'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    isloggedin: false,
+    username: '',
+    token: null
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    // setUser (state, posts) {
+    //   state.all = posts
+    // }
+    // setOpened (state, post) {
+    //   state.opened = post
+    // },
+    // clearOpened (state) {
+    //   state.opened = null
+    // }
+  },
+
+  // actions
+  actions : {
+    getToken ({ commit, state }, data) {
+      // console.log('getToken data', data)
+
+      let config = {
+        headers: {
+          "Content-Type": "application/json"
+        }
+      }
+
+      // console.log('data', data)
+      // console.log('config', config)
+
+      HTTP.post('/user/login?_format=json', data, config)
+        .then(response => {
+          console.log('response', response)
+          // cb(response.data)
+        })
+        .catch(({ error }) => {
+            console.log('Issue with login', error);
+            Promise.reject(error);
+        })
+    }
+    // ,
+    // logout ({ commit }) {
+    //
+    // }
+  }
+
+}