PHPackages                             emaphp/magento2-module-vuewidget - 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. emaphp/magento2-module-vuewidget

ActiveMagento2-module[Utility & Helpers](/categories/utility)

emaphp/magento2-module-vuewidget
================================

Vue.js widgets for Magento 2

1.1.0(3y ago)00MITJavaScript

Since Nov 14Pushed 3y ago1 watchersCompare

[ Source](https://github.com/emaphp/magento2-module-vuewidget)[ Packagist](https://packagist.org/packages/emaphp/magento2-module-vuewidget)[ RSS](/packages/emaphp-magento2-module-vuewidget/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependencies (1)Versions (4)Used By (0)

VueWidget
=========

[](#vuewidget)

Vue 2 widgets for Magento 2.

About
-----

[](#about)

This is Magento 2 module skeleton for building and displaying widgets made with [Vue.js](https://vuejs.org/) v2. It comes with with a simple build simple to get you started.

Requirements
------------

[](#requirements)

This module assumes you are running Magento >=2.2. You'll also need [Rollup](https://rollupjs.org/) installed.

Quick start
-----------

[](#quick-start)

Enter the `app/code/` directory and clone the repo:

```
cd app/code/ && git clone https://github.com/emaphp/magento2-module-vuewidget Vue/Widget

```

Install Node dependencies. You can use either `npm` or `yarn`:

```
cd Vue/Widget && npm install

```

Now do a first dev build. This will compile some generic components available on the `assets/` folder along with its dependencies:

```
npm run dev

```

Go back to the main application folder and enable the module:

```
php bin/magento module:enable Vue_Widget --clear-static-content
php bin/magento setup:upgrade && php bin/magento setup:di:compile

```

Clear cache:

```
php bin/magento cache:clean

```

Usage
-----

[](#usage)

Login as admin. Go to *Stores* > *Settings* > *Configuration*. You should be able to see a new option at the bottom called *Vue Widget*. Now, from the main menu, go to *Content* > *Elements* > *Widgets*. Click on *Add Widget*. On the *Settings* section, click on the *Type* field. A *Vue Widget* option should appear at the bottom. Then pick the area where the widget should be included (for example, within *CMS Home Page*).

[![New Widget](https://camo.githubusercontent.com/17b757aef37f27cbab1e5237ed9e929dc6aa8c21d5fa5d2682a2b341afd2f616/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d314465562d777373784f474e70706a516976574473316939443136505050417259)](https://camo.githubusercontent.com/17b757aef37f27cbab1e5237ed9e929dc6aa8c21d5fa5d2682a2b341afd2f616/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d314465562d777373784f474e70706a516976574473316939443136505050417259)

Widgets are included by name; that is, the id used to register them on `requirejs-config.js`. Try entering `VueHelloWorld` on the *Component* field. Then, click on the *Add* button on the form below. This component supports a single `prop` called `name`. Entering a *prop* is pretty straighforward, just fill the *Name* and *Value* columns. Then, hit *Save*.

[![Widget Props](https://camo.githubusercontent.com/03d371716f906e9950efe18f563ff347a7d9059afce1ac60fdc69b8f9de13796/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d313832485739473334535157586c432d555f65463648614665756142754357672d)](https://camo.githubusercontent.com/03d371716f906e9950efe18f563ff347a7d9059afce1ac60fdc69b8f9de13796/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d313832485739473334535157586c432d555f65463648614665756142754357672d)

Clear cache and refresh the page. You should be able to view your widget on the page you selected.

In-Depth
--------

[](#in-depth)

### Adding components

[](#adding-components)

The process of adding components to your app will consist on these steps:

- Write the component using the `.vue` syntax. Put it inside the `assets/frontend/components` folder.
- Compile the component using `rollup`.
- Deploy assets and clear cache.

This module assumes you're already familiar with building Vue.js components, so we'll only cover the second step. By default, Magento is not able to understand files using the `.vue` extension (or anything using ES6/ES7). To solve this, this repo includes a build system that allows you to turn these files into something that can be included within the page through *RequireJS*. The process starts by defining which files need to be transpiled. That info can be found within `rollup.config.js`. The structure of this file is pretty straightforward: an array containing which files should be transpiled and what plugins are required to do so. Create a file inside `assets/frontend/components/` called `VueCounter.vue` and put the following content:

```

    Count: {{count}}

export default {
  data () {
    return {
      count: 0
    }
  },

  methods: {
    increment: function () {
      this.count++;
    }
  }
}

```

Now, in order to transpile this file to plain Javascript we need to add an additional entry in `rollup.config.js`. It should look like this:

```
  {
    input: './assets/frontend/components/VueCounter.vue',
    output: {
      file: './view/frontend/web/js/components/VueCounter.js',
      format: 'iife',
      name: 'bundle',
    },
    plugins: [
      babel({
        exclude: 'node_modules/**'
      }),
      resolve(),
      commonjs(),
      vue(),
      magento2()
    ]
  }
```

This entry tells `rollup` to transpile the file and put the resulting content in `view/frontend/web/js/components/VueCounter.js`. Open a terminal and run the following command (make sure you're on the module directory):

```
npm run build

```

`rollup` will now run each entry and generate each bundle separately. This build system uses [rollup-plugin-magento2](https://github.com/emaphp/rollup-plugin-magento2) internally to wrap each bundle into something that can be imported using *RequireJS*. Once this process is finished, your module is compiled and can now be used as a widget.

We will create a new alias for this component by adding the following line in `requirejs-config.js`:

```
// File: view/frontend/requirejs-config.js

var config = {
  map: {
    '*': {
      'VueCounter': 'Vue_Widget/js/components/VueCounter'
    }
  }
};
```

Now, login as admin and repeat the steps described in the *Quick Start* guide. When reaching the *Widget Options* section, simply enter *VueCounter* on the *Component* field. Clear cache and reload the page.

### Vue blocks

[](#vue-blocks)

Widgets are nice but they are kind of limited. For example, you are not able to pass a prop directly from PHP. Because of this, an extended script called `vueapp` is provided as an alternative. `vueapp` lets you inject Vue components into your regular HTML blocks. When used this way, the block acts as a component container. Any component that is displayed within must be listed inside the `components` property:

```