What pattern prefer to use when combine Laravel and Vuejs

Question

As I know, there are 2 ways to use Vuejs in view: inline-template and component.

#1. Inline-template

I gonna use the code from series Let's Build A Forum with Laravel and TDD for express my point.

ThreadsController:

public function show($channel, Thread $thread, Trending $trending)
    {
        if (auth()->check()) {
            auth()->user()->read($thread);
        }

        $trending->push($thread);

        $thread->increment('visits');

        return view('threads.show', compact('thread'));
    }

View (threads.show)

@extends('layouts.app')

@section('head')
    <link rel="stylesheet" href="/css/vendor/jquery.atwho.css">
@endsection

@section('content')
    <thread-view :thread="{{ $thread }}" inline-template>
        <div class="container">
            <div class="row">
                <div class="col-md-8" v-cloak>
                    @include ('threads._question')

                    <replies @added="repliesCount++" @removed="repliesCount--"></replies>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>
                                This thread was published {{ $thread->created_at->diffForHumans() }} by
                                <a href="#">{{ $thread->creator->name }}</a>, and currently
                                has <span
                                        v-text="repliesCount"></span> {{ str_plural('comment', $thread->replies_count) }}
                                .
                            </p>

                            <p>
                                <subscribe-button :active="{{ json_encode($thread->isSubscribedTo) }}" v-if="signedIn"></subscribe-button>

                                <button class="btn btn-default"
                                        v-if="authorize('isAdmin')"
                                        @click="toggleLock"
                                        v-text="locked ? 'Unlock' : 'Lock'"></button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </thread-view>
@endsection

And the ThreadView Component doesn't include <template></template> tag.

Taylor still uses the blade as default and just import Vuejs component when needed.

#2. Component: Same above but all the stuff in view will be brought into <template></template> tag.

Which way should I prefer to use in my project? I can't see the advantages and disadvantages of both ways. The only thing I can see, if I use the inline-template, I can take advance of Laravel Collection helper or blade directive (@auth, @guest).

Answer 1

I think it depends on the complexity of your interface you intend to implement. Personally, I use Vuejs with the whole of its capabilities as my frontend layer of my application. In this case, you can employ Vue Router to transform more smoothly between your pages and also Vuex as the storage management in your frontend layer.

To sum up, if you want to implement a SPA (Single Page Application) choose the second way. But if you want to just use limited capabilities of Vuejs continue the first way.