deadsimple/vuelibrary

A deadsimple module to use VueJS components in your Magento2 webshops

1.2.0 2021-11-12 14:55 UTC

Requires

• magento/framework: >=100.1.0

MIT

• Maurits Meester
• Dennis Verleg

README

Deadsimple VueJS Magento2 Composer Library

This package allows you to use VueJs together with requirejs in your Magento2 setup straight out of the box

Installation

Use composer to install the module: composer require deadsimple/vuelibrary

Development mode

This module loads VueJS in minified production mode by default but is served with a developer version too, if you need VueJS in development mode change your requirejs-config.js to:

var config = {
	paths: {
		Vue: 'Deadsimple_VueLibrary/js/lib/vue',
		vue: 'Deadsimple_VueLibrary/js/lib/require-vuejs',
	},
	shim: {
		Vue: {
			exports: 'Vue'
		}
	}
};

Usage

Create a main js file to load through requirejs in this main.js file define Vue (with a capital V) and use vue (see the non capital v) to load your created vue components in this example Searchinput.vue. From this point on you can initialize vue the way your used to with the new Vue() initializer, please make sure you have a container available to run your VueJS code in #essearch in this example;

define([
  'Vue',
  'vue!components/SearchInput.vue'
], function (Vue) {
  'use strict';
  
   new Vue({
      el: '#essearch',
   });
})

Version

This library loads: Vue.js v2.6.14

TODO

• Create easier switch between production and development version of VueJS
• Add to library bundling if available