withVue2 deprecated

Use this decorator to create a component which will mount on a given ref a Vue app and update this latter when the component's lifecycle hooks (mounted, updated and destroyed) are fired.

Usage

import { withVue2, Base } from '@studiometa/js-toolkit';
import Vue from 'vue';
import App from './App.vue';

export default class Component extends withVue2(Base, Vue) {
  static vueConfig = {
    render: (h) => h(App),
  };
}

Parameters

• BaseClass (Base): The Base class to add Vue capabilities to
• Vue (VueConstructor): The Vue constructor to use

Return value

• Base: A child class of the given class with management of a Vue application configured

API

Configuration

static vueConfig

The configuration to use to instantiate the Vue application.

Instance properties

$vue

The $vue instance property holds a Vue instance on which the vueConfig object is automatically given.

Examples

Simple usage

This decorator needs a vueConfig object and a ref in the component it is tied to.

TIP

See the refs API documentation part for explanations about how to use refs.

<div data-component="MyVueComponent">
  <div data-ref="vue"></div>
</div>

import { Base, withVue2 } from '@studiometa/js-toolkit';
import Vue from 'vue';
import CustomComponent from './CustomComponent.vue';

export default class MyVueComponent extends withVue2(Base, Vue) {
  static vueConfig = {
    render: (h) => h(CustomComponent),
  };

  static config = {
    name: 'MyVueComponent',
  };
}

Advanced usage

Use component $options as a props using vueConfig.

<div data-component="MyVueComponent">
  <div data-ref="vue"></div>
</div>

import { withVue2, Base } from '@studiometa/js-toolkit';
import Vue from 'vue';
import App from './App.vue';

export default class Component extends withVue2(Base, Vue) {
  static config = {
    options: {
      property: {
        type: String,
        default: '',
      },
    },
  };

  get vueConfig() {
    return {
      render: (h) =>
        h(App, {
          props: {
            property: this.$options.property,
          },
        }),
    };
  }
}