@chenfengyuan/create-vue-component

create-vue-component

Convert anything to a Vue component.

Main

dist/
├── create-vue-component.js        (UMD)
├── create-vue-component.min.js    (UMD, compressed)
├── create-vue-component.common.js (CommonJS, default)
└── create-vue-component.esm.js    (ES Module)

Installation

npm install @chenfengyuan/create-vue-component

Usage

Syntax

createVueComponent(content, options)

• content

  • Type: *
  • The content for creating Vue component.

• options (optional)

  • Type: Object
  • The options for creating Vue component.
  • Properties:
    • tag
      • Type: String
      • Default: 'span'
      • The tag for root element of the created Vue component.
    • data
      • Type: *
      • The data as the second parameter if the content is a render function.

• (return value)

  • Type: Object
  • The created Vue component.
  • If the given content is a valid Vue component then return a clone of the content.
  • If the given content is a function then return a Vue component with the content as the render property value.
  • If the given content is anything else then return a Vue component with the content as the template property value.

Examples

import createVueComponent from '@chenfengyuan/create-vue-component';

createVueComponent({
  template: '<p>Hello, World!</p>',
});
// will render as: <p>Hello, World!</p>

createVueComponent('<strong>Hello, World!</strong>');
// will render as: <span><strong>Hello, World!</strong></span>

createVueComponent('Hello, World!');
// will render as: <span>Hello, World!</span>

createVueComponent('Hello, World!', {
  tag: 'p',
});
// will render as: <p>Hello, World!</p>

createVueComponent(true);
// will render as: <span>true</span>

createVueComponent(1);
// will render as: <span>1</span>

createVueComponent(['Hello', 'World']);
// will render as: <span>Hello,World</span>

createVueComponent(function content(createElement, data, context) {
  return createElement('p', `Hello, ${data.name}!`);
}, {
  data: {
    name: 'World',
  },
});
// will render as: <p>Hello, World!</p>

createVueComponent({});
// will render as: <span>[object Object]</span>

createVueComponent();
// will render as: <span>undefined</span>

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

License

MIT © Chen Fengyuan