Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

小規模から導入しやすいVue.js

More than 3 years have passed since last update.

前にLaravel+Reactの記事書いたけどLaravelだと最初から用意されてるVue.jsのほうがやっぱり楽…。
というかあの記事もすでに古い…React公式にあった日本語版チュートリアルが消えてる。
公式ドキュメントだけ見て使えないものは合わないと判断。
LaravelとVue.jsは公式(の日本語訳)だけですぐ使えた。
ReactはチュートリアルだけだったけどVue.jsはすでに実戦で使ってる。

環境

  • Laravel 5.4.*
  • Vue.js 2.2.*

新規の場合

LaravelはAPIとしてjson返すだけ+全面的にVue、が今は一番楽かな。
make:authで作るログイン機能部分だけは元のものを活かす形。
スマホアプリから使いたいとか外部からのログインはLaravel PassportでOAuth認証。

まぁ新規なら好きなようにできる。

既存プロジェクトへの導入

ここから本題。
例:APIで取ってきたデータを表示する部品を作る。

準備

旧バージョンからアップグレードしてきてる場合Vueは使ってないだろうから
package.json webpack.mix.js /resources/assets/js 辺りを最新のものに合わせる。
https://github.com/laravel/laravel

レイアウト用ファイルで全体を#appで囲む。
viewのどこでもVueコンポーネントが使える状態。

<body>
  <div id="app">
  ...
  </div>
</body>

CSRF Tokenのこの辺も必要。

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>

これを参考に。
https://github.com/laravel/framework/blob/5.4/src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub

API

ここは問題ないだろうからただのサンプル。
GET /api/posts

routes/api.php

Route::resource('posts', 'PostController');

PostController

public function index()
{
    return Post::latest()->paginate(10);
}

Vueコンポーネント

やることは
1. /resources/assets/js/components/ にコンポーネントを作る。
2. app.jsで登録。
3. viewで使う。

以上。

/resources/assets/js/components/Post.vue
これもただのサンプル。

<template>
  <ul>
    <li v-for="post in posts">{{ post.title }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        posts: [],
      }
    },
    mounted() {
      axios.get('/api/posts').then(res => {
        this.posts = res.data.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
</script>

/resources/assets/js/app.js

Vue.component('my-post', require('./components/Post'));

どこかのview

<my-post></my-post>

Vueが影響するのはこの範囲だけ。
コンポーネント単位で小さく導入できる。

その他

別にVueコンポーネント内でjQuery使ってもいい。
Laravel Passportでも使ってる。
すでにjQuery使ってるなら無理に排除する必要はない。
とはいえ複雑なことすると破綻するのであくまでも後から追加したVueから既存のDOMを操作したい時に1ヶ所だけ許可する、くらいに制限したほうがいい。
既存DOMも徐々にVueに置き換える。

Vuexは早めに使い出したほうがいい。
複数のコンポーネント間でデータを共有したくなったら導入していい。
イベントでやろうとするとたぶん早々に破綻。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away