README

Craft Vue Component 是 Craft CMS 的轻量级插件。它用于在 Twig 模板中渲染编译后的 Vue 组件。

组件属性通过 PHP 或 Twig 传入，组件代码保留在 Vue 单文件（.vue）中，这样您可以获得完整的端到端前端开发体验，并且拥有干净的 Twig 模板代码。

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

要求

此插件需要 Craft CMS 4.3.5 或更高版本，以及 PHP 8.0.2 或更高版本。

安装

您可以从插件商店或使用 Composer 安装此插件。

从插件商店

前往项目控制面板中的插件商店，搜索“Vue Component”，然后点击“安装”。

使用 Composer

打开您的终端并运行以下命令

# 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 包

npm i craft-vue-component --save

使用方法

前端开发

将注册代码添加到您的前端项目中，通常在 index.js 文件中

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

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

vue/controllers 是存储 Vue 单个组件文件的目录。您可以用自己的目录替换它

这将注册指定目录下的 Vue 组件并将依赖绑定到浏览器的 window 对象。

window.createVueComponent 和 window.mountVueComponent 已准备好。

在 Twig 模板中使用您的组件

{{ vueComponent() }}

现在，假设我们在 vue/controllers 中有一个 field.vue 组件

<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>

渲染它

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

或者

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