kmmkの雑種系日記

学習まとめです。

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

フォルダ構成

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を使用できるようにする

  1. 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;
  1. 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
});
  1. App.vueを作成
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {};
</script>
  1. 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>