Как использовать vue js для определенных Laravel маршрутов и blade для других маршрутов?

Question

Я попытался найти это, но, похоже, не нашел ответа. Кажется, это указывает на то, что если вы собираетесь использовать лезвие, тогда все ваши представления должны быть в лезвии, тогда как если вы собираетесь продолжать использовать vue js для своего внешнего интерфейса, тогда каждое представление должно быть в Vue.

Итак, мой вопрос: могу ли я использовать vue js для определенных маршрутов и лезвие для определенных маршрутов?

Например, допустим, если у меня есть маршрут '/ login', и я хотел бы чтобы использовать Vue js для внешнего интерфейса этого маршрута и для маршрута '/ about', я бы хотел использовать лезвие Laravel для его внешнего интерфейса. Возможно ли это?

Если да, то как это сделать?

Спасибо.

Answer 1

Да, создать Vue компоненты и вызывать их из шаблона лезвия: -

ExampleComponent. vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

example.blade. php:

@extends('layouts.app')

@section('content')

    <example-component></example-component>

@endsection

Answer 2

Спасибо @chris за ответ, однако я хотел бы расширить этот ответ.

Допустим, вы хотите зарегистрировать a для нового компонента, который находится в resources / js / components / AboutComponent. vue

Шаг 1: Зарегистрируйте маршрут в сети. php

Route::get('contact', 'TestController@contact')->middleware('auth');

Шаг 2: Создайте контроллер и укажите на лезвие

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{

    public function contact()
    {
        return view('testing.contact');
    }
}

// Шаг 3: Создайте компонент vue в resources / js / components / ContactComponent. vue

<template>
    <div class="col-md-12">
        <p>Brought to you by Evan You</p>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    } ,
    mounted() {
        console.log('Contact Component mounted.')
    }
}
</script>

// Шаг 4 Зарегистрируйте Vue компонент в resources / js / app. js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    
    /**
     * The following block of code may be used to automatically register your
     * Vue components. It will recursively scan this directory for the Vue
     * components and automatically register them with their "basename".
     *
     * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
     */
    
    // const files = require.context('./', true, /\.vue$/i)
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
    
Vue.component('contact-component', require('./components/ContactComponent.vue').default);
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */

const app = new Vue({
    el: '#app',
});

// Шаг 5 Используйте этот компонент в contact.blade. php, который находится в resources / views / testing / contact.blade. php

    @extends('layouts.app')
    @section('content')
    <div class="container">
        <h2>From the vue component</h2>
{{-- This is the vue component that we registered in app.js --}}
        <contact-component></contact-component>
    </div>
    <div class="container">
        <div class="col-md-12">
            <h2>From the blade component</h2>
            <p>Brought to you by Taylor Otwell</p>
        </div>
    </div>
    @endsection

// Шаг 6 Дон Не забудьте запустить npm запустить часы

Результат:

введите описание изображения здесь