日々勉強

laravelのプロジェクト内でvueを使う時のvue-router初期設定

Vue.js

フォルダ構成

sample-project/
　├ app/
　├ 以降省略(Laravelの構成です)
　├ resources/
　│　　├ js/
　│　　│   └ components/
　│　　│   ├ pages/
　│　  │   │  └ sample.vue
　│　　│   ├ router/
　│　  │   │  └ index.js
　│　　│   ├ app.js 
　│　　│   ├ App.vue
　│　  │   └ bootstrap.js
　│　  └ view/
　│　      └ welcome.blade.php/

Laravelプロジェクト作成からvue-routerのインストールまで

# laravelプロジェクト作成
$ laravel new sample-project

# vueの導入
$ composer require laravel/ui
$ php artisan ui vue
$ npm install

# vue-routerの導入
$ npm i vue-router

vue-routerを使用できるようにする

app/resources/js/router/index.jsを作成

import VueRouter from "vue-router";
import Vue from "vue";

/**
 * pages
 */
import Sample from "../pages/Sample.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "sample",
        component: Sample
    }
];

const router = new VueRouter({
    mode: "history",
    routes
});

export default router;

app.jsでvue-routerをグローバルに使用できるようにする

# 各々インポート
require("./bootstrap");
import Vue from "vue";
import router from "./router";

Vue.config.productionTip = false;

# App.vueを登録する
Vue.component("app", require("./App.vue").default);

# routerをグローバルに使用できるようにする
const app = new Vue({
    el: "#app",
    router
});

App.vueを作成

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {};
</script>

views/welcome.blade.phpを編集（App.vueを埋め込む）

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>

<body>
    <div id="app">
        <app></app>
    </div>
    <script src=" {{ mix('js/app.js') }} "></script>
</body>

</html>