PHPackages                             panlatent/craft-vue-component - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. panlatent/craft-vue-component

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

panlatent/craft-vue-component
=============================

1.0.0(1y ago)252[1 issues](https://github.com/panlatent/craft-vue-component/issues)mitTypeScriptPHP >=8.0.2

Since Jun 7Pushed 1y ago1 watchersCompare

[ Source](https://github.com/panlatent/craft-vue-component)[ Packagist](https://packagist.org/packages/panlatent/craft-vue-component)[ RSS](/packages/panlatent-craft-vue-component/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Craft Vue Component
===================

[](#craft-vue-component)

[![License](https://camo.githubusercontent.com/d96674bb3ed6fee3ac685e164010439ce704d00d379d7e3ce6268c70e396fa75/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f70616e6c6174656e742f63726166742d7675652d636f6d706f6e656e743f7374796c653d666c61742d737175617265)](LICENSE)

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

[](#requirements)

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

Installation
------------

[](#installation)

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

#### From the Plugin Store

[](#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

[](#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

[](#install-npm-package)

```
npm i craft-vue-component --save
```

Usage
-----

[](#usage)

### Front-end Development

[](#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

[](#using-your-component-in-a-twig-template)

```
{{ vueComponent() }}
```

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

```

import {defineProps} from "vue";

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

    {{ label }} {{ required ? '*' : ''}}

```

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 %}
```

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance22

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

705d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/c79a4220751bab4ff8ee0953a41c4664fddb12e2a47e69442c2e5315b5c7ef9a?d=identicon)[panlatent](/maintainers/panlatent)

---

Top Contributors

[![panlatent](https://avatars.githubusercontent.com/u/4393268?v=4)](https://github.com/panlatent "panlatent (5 commits)")

### Embed Badge

![Health badge](/badges/panlatent-craft-vue-component/health.svg)

```
[![Health](https://phpackages.com/badges/panlatent-craft-vue-component/health.svg)](https://phpackages.com/packages/panlatent-craft-vue-component)
```

###  Alternatives

[spicyweb/craft-neo

A Matrix-like field type with block hierarchy

395798.1k10](/packages/spicyweb-craft-neo)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[solspace/craft-freeform

The most flexible and user-friendly form building plugin!

52664.9k12](/packages/solspace-craft-freeform)[supercool/tablemaker

Create customizable and user-defined table fields.

40141.7k](/packages/supercool-tablemaker)[verbb/vizy

A flexible visual editor field for Craft.

4348.6k](/packages/verbb-vizy)[verbb/social-poster

Automatically post entries to social media.

918.5k](/packages/verbb-social-poster)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)