panlatent / craft-vue-component
Installs: 31
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Language:TypeScript
Type:craft-plugin
Requires
- php: >=8.0.2
- craftcms/cms: ^4.3.5|^5.0.0
Requires (Dev)
- craftcms/ecs: dev-main
- craftcms/phpstan: dev-main
README
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) }}
Requirements
This plugin requires Craft CMS 4.3.5 or later, and PHP 8.0.2 or later.
Installation
You can install this plugin from the Plugin Store or with Composer.
From the Plugin Store
Go to the Plugin Store in your project’s Control Panel and search for “Vue Component”. Then press “Install”.
With Composer
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
Install NPM Package
npm i craft-vue-component --save
Usage
Front-end Development
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.
Using your component in a Twig template
{{ 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 %}