Craft Vue Component is a lightweight plugin for Craft CMS. It is used to render compiled Vue components in Twig templates.

Component props are passed in by PHP or Twig, and the component code remains in the Vue single file(.vue). so that you can get a complete front-end development experience，and with clean twig template code.

{{ vueComponent('post', data) }}

This plugin requires Craft CMS 4.3.5 or later, and PHP 8.0.2 or later.

You can install this plugin from the Plugin Store or with Composer.

Go to the Plugin Store in your project’s Control Panel and search for “Vue Component”. Then press “Install”.

Open your terminal and run the following commands:

# go to the project directory
cd /path/to/my-project.test

# tell Composer to load the plugin
composer require panlatent/craft-vue-component

# tell Craft to install the plugin
./craft plugin/install vue-component

npm i craft-vue-component --save

Add the registration code to your frontend project, usually in the index.js file

import {VueComponent} from 'craft-vue-component'

VueComponent.register((app) => {
   // app.use() ...
}, require.context('vue/controllers', true, /\.vue$/))

vue/controllers is the directory where Vue single component files are stored. You can replace it with your directory

This will register the Vue components under the specified directory and bind the dependencies to the browser's window object.

window.createVueComponent and window.mountVueComponent are ready.

{{ vueComponent() }}

Now, suppose we have a field.vue component in vue/controllers:

<script setup>
import {defineProps} from "vue";

const props = defineProps(['label', 'required'])

</script>

<template>
  <div class="field-container">
    <label class="body-font-4 d-block text-gray-900 rt-mb-8">{{ label }} <span class="required">{{ required ? '*' : ''}}</span></label>
    <slot></slot>
  </div>
</template>

<style scoped>

</style>

Render it:

{{ vueComponent('field', {label: "Title", required: required ?? false}}}

Or

{% js %}
createVueComponent({
    data() {
        {% block data %}
        var data = {{ {
            label: "Title",
            required: required ?? false,
        }|json_encode|raw }}
        {% endblock %}
        return data;
    },
    computed: {
    },
    methods: {
    }
}).mount("#{{ containerId }}");
{% endjs %}