first commit

resources/js/app.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import router from './router'
+import App from './components/App'
+import store from './store'
+
+require('./bootstrap');
+
+const app = new Vue({
+    el: '#app',
+
+    components: {
+        App
+    },
+    router, store,
+});

resources/js/bootstrap.js

@@ -0,0 +1,7 @@
+window._ = require('lodash');
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+

resources/js/components/App.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <Nav />
+        <div class="flex">
+            <SideBar />
+            <router-view class="main"></router-view>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Nav from "./Nav";
+    import SideBar from "./SideBar";
+
+    export default {
+        name: "App",
+        components : {
+            Nav, SideBar
+        },
+        mounted() {
+            this.$store.dispatch('fetchAuthUser')
+        },
+        created() {
+            this.$store.dispatch('setPageTitle', this.$route.meta.title)
+        },
+        watch: {
+            $route(to, from) {
+                this.$store.dispatch('setPageTitle', to.meta.title)
+            }
+        }
+    }
+</script>

resources/js/components/Nav.vue

@@ -0,0 +1,32 @@
+<template>
+    <nav class="flex-between flex-center py-1 px-2">
+        <router-link to="/">Logo</router-link>
+        <router-link v-if="authUser" :to="'/users/' + authUser.data.user_id">Me</router-link>
+        <form v-if="authUser">
+            <input type="search" name="search" placeholder="Search">
+            <input type="submit" value="S">
+        </form>
+        <router-link to="/connexion">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo"><path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/></svg>
+        </router-link>
+    </nav>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        name: "Nav",
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser'
+            })
+        },
+        mounted() {
+            // axios.get('/api/auth-user')
+            //     .then(res => {
+            //         this.user = res.data
+            //     })
+        }
+    }
+</script>

resources/js/components/SideBar.vue

@@ -0,0 +1,11 @@
+<template>
+    <aside>
+        Menu
+    </aside>
+</template>
+
+<script>
+    export default {
+        name: "SideBar"
+    }
+</script>

resources/js/router.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from "./views/Home"
+// import UserShow from "./views/Users/Show"
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+    mode: 'history',
+
+    routes: [
+        {
+            path: '/', name: 'home', component: Home,
+            meta: { title: 'Home'}
+        },
+    ]
+})

resources/js/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import User from './modules/user'
+import Title from './modules/title'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    modules: {
+        User, Title,
+    }
+})

resources/js/store/modules/title.js

@@ -0,0 +1,27 @@
+const state = {
+    title: 'Welcome'
+}
+
+const getter = {
+    pageTitle: state => {
+        return state.title
+    }
+}
+
+const  actions = {
+    setPageTitle({commit, state}, title) {
+        commit('setTitle', title)
+
+        document.title = state.title
+    }
+}
+
+const mutations = {
+    setTitle(state, title) {
+        state.title = title + ' | Facebook'
+    }
+}
+
+export default {
+    state, getter, actions, mutations,
+}

resources/js/store/modules/user.js

@@ -0,0 +1,32 @@
+const state = {
+    user: null,
+    userStatus: null,
+}
+
+const getters = {
+    authUser: state => {
+        return state.user
+    }
+}
+
+const actions = {
+    fetchAuthUser({commit, state}) {
+        axios.get('/api/auth-user')
+            .then(res => {
+                commit('setAuthUser', res.data)
+            })
+            .catch(error => {
+                console.log('Unable to fetch auth user')
+            })
+    }
+}
+
+const mutations = {
+    setAuthUser(state, user) {
+        state.user = user
+    }
+}
+
+export default {
+    state, getters, actions, mutations,
+}

resources/js/views/Home.vue

@@ -0,0 +1,9 @@
+<template>
+    <h1>Home</h1>
+</template>
+
+<script>
+    export default {
+        name: "Home"
+    }
+</script>