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

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=""></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=""
    ></my-component>
</div>
@endsection

<template>
    <div>
        
    </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?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2VaRbEW
via IFTTT