Is it possible to create a Vue single-file component inside a Blade template file?

Question

This is a question about Laravel and Vue.

I've tried a couple times now over the past year to create a Vue component inside a Blade template, but I haven't been able to get it to work. I feel like it could be possible, but I haven't found an example of someone doing it. I've searched Google every time I try to do this, but I can't find an example.

Rather than create a Vue single-file component (SFC) and call it from a Blade template like this:

@extends('layouts.root')

@section('title', 'Some Page')

@section('content')
<my-component :some-state="{{ $someData->toJson() }}"></my-component>
@endsection

I would like to create the Vue component inside the Blade template, something like this:

resources/views/some/page.blade.php

@extends('layouts.root')

@section('title', 'Some Page')

@section('content')
<div>
    <my-component
        :some-state="{{ $someData->toJson() }}"
    ></my-component>
</div>
@endsection

<template>
    <div>
        {{ $object }}
    </div>
</template>

<script>
export default {
    name: 'my-component',

    props: {
        type: Object,
        required: true,
    },

    data() {
        return {};
    },

    computed: {},

    methods: {},
}
</script>

<style scoped>
    .div { background-color: red; }
</style>

I am looking for a way to do all of that from the page.blade.php file.

Am I close, or is it even possible?

My motivation for this is that I have about 30 Blade templates, and if I decide I want some client-side state in them or to use JavaScript instead of Blade (for stuff like v-if instead of @if () @endif), then I need to create about 30 more files for those Vue components.

It might be nice to omit that file-creation step and use those Blade template files to deliver data from Laravel and have fully functional Vue SFC in there too. Maybe it's a wild idea, and the idiomatic choice would be to make more Vue components in Laravel's folder resources/assets/js/components, but I just want to know if it's possible. Can anyone shed some light on this pursuit?

WebMan WebMan · Accepted Answer · 2019-04-04T14:56:59

Considering you are using single file component form of Vue (template, script, style) you can not use it like this because of that the Vue special codes must be converted to native javascript by using tools before they go to browser.

If you want to use anyway there is one more way to create component but not preferred way:

Here I showed basic idea of how it can be done but you must edit this for your needs.

<div id="vue-app">
    <todo-component></todo-component>
</div>

//then create component by using x-template way
<script type="x-template" id="todo-component">
    <div>
        <span :title="Your normal Vue codes title">{{text}}</span>
    </div>
</script>


//and add component to Vue.

<script>
    Vue.component('todo-component', {
        template: '#todo-component',
        data: function () {
            return {
                text: 'Your normal Vue codes here'
            };
        },
    });

    var app = new Vue({
        el: '#vue-app'
    });
</script>

Is it possible to create a Vue single-file component inside a Blade template file?

1 Answers