Vue Custom Element - Web Components' Custom Elements for Vue.js

Overview

Finally - official Web Components implementation! - check vuejs/vue-web-component-wrapper

Vue-custom-element

Table of contents

Demo

You can check out Vue-custom-element demos at https://karol-f.github.io/vue-custom-element/

Installation

NPM

npm install vue-custom-element --save
import vueCustomElement from 'vue-custom-element'

Vue.use(vueCustomElement);

To build your web-component using vue-cli, you have to use the following command:

vue-cli-service build --target lib --name your-component-name src/main.js

Note: the command vue-cli-service build --target wc does not work, since it using vue's own vue-web-component-wrapper.

Direct include

If you are using Vue globally, just include vue-custom-element.js and it will automatically install the Vue.customElement method.

<script src="path/to/vue-custom-element.js"></script>

Optional polyfill

For cross-browser compatibility (IE9+) use Custom Elements polyfill.

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>

or

import 'document-register-element/build/document-register-element';

Description

Vue-custom-element is a tiny wrapper around Vue components. It provides a seamless way to use Vue components in HTML, plain JavaScript, Vue, React, Angular etc., without manually initialising Vue. It's using power of Web Components' Custom Elements.

  • Works with Vue 0.12.x, 1.x and 2.x
  • Small - 2.7 kb min+gzip, optional polyfill - 5 kb min+gzip

Why you might need Vue-custom-element?

Vue-custom-element

It might be confusing for users to understand the different use cases of Vue components vs Custom Elements .

Why might you need Vue-custom-element? Simple, for your Vue components user's convenience. All they will need to do is include your JavaScript file and then they can:

  • include components as HTML tags (e.g. <my-component></my-component>) at any time of the document lifecycle. You can use your elements in e.g. SPA application just by including HTML tag - no Vue initialization or JavaScript usage is needed. Custom Elements will auto initialize when mounted into document. You can include them in e.g. Vue, Angular or React projects and browser will take care of detecting it and initialization
  • use a simple API that allows for interacting with underlaying Vue instance by changing attributes, props or listening to events
  • take advantage of features like lazy-loading, that allows for loading components on demand, only when user add them to document

Features

  • Simplicity - only tag-name and Vue component object are needed for Vue.customElement() usage
  • Compatibility - using the optional polyfills a wide range of browsers is supported, including IE9+, Android and IOS
  • Full featured - you can use nesting, HMR, slots, lazy-loading, native Custom Elements callbacks.
    • reactive props and HTML attributes
    • automatic props casting (numbers, booleans) so they won't be available as strings but proper data types
    • listening to Vue component $emit'ed events
    • 'default' and 'named' slots are available for passing static content, check out the demo for an example
    • Hot Module Replacement for seamless developer experience (unminimized build, Vue 2.x+)
    • lazy-loading - you can download a component after it's attached to document. Useful for e.g. UI library authors. Check out the demo for an example
    • detect if detached callback is not invoked due to opening vue-custom-element in modal - element is then detached and attached to DOM again. It would be undesirable to destroy it immediately
  • Custom Elements v1 - compatible with latest specifications. Vue-custom-element will use native implementation if supported

Check out the demo site to see it in action.

Example

For additional examples and detailed description check the demos page.

Custom Element HTML
<widget-vue prop1="1" prop2="string" prop3="true"></widget-vue>
JavaScript - register with Vue-custom-element
Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2',
    'prop3'
  ],
  data: {
    message: 'Hello Vue!'
  },
  template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>'
});
JavaScript - element API usage
document.querySelector('widget-vue').prop2 // get prop value
document.querySelector('widget-vue').prop2 = 'another string' // set prop value

You can also change <widget-vue> HTML attributes and changes will be instantly reflected.

ShadowDOM Example

By default, vue-custom-element does not mount underneath a ShadowDOM. While this is easier to develop and debug, CSS stylings for the parent can contaminate the component, and stylings for the component can contaminate the parent. This is most prevalent when using prebuilt UI libraries which assume the component is the only content on the page (i.e. Vuetify). A ShadowDOM prevents this contamination by isolating the components and stylings within an HTML document fragment.

In these situations, components should be mounted underneath a shadowDOM using the option

Vue.customElement('widget-vue', CustomWidget, {
  shadow: true,
  beforeCreateVueInstance(root) {
    const rootNode = root.el.getRootNode();

    if (rootNode instanceof ShadowRoot) {
      root.shadowRoot = rootNode;
    } else {
      root.shadowRoot = document.head;
    }
    return root;
  },
});

The additional beforeCreateVueInstance is only required if your Vue component has bundled stylings and you are using css-modules with Webpack to bundle (which is most use cases). In addition, if you are using vue-loader and vue-style-loader plugins with Webpack, you will need to pass the shadowMode: true option to the plugins also. This is required so the plugins know they that CSS styles should be attached under the shadowDOM and not in the document.head (which is the default behavior).

webpack.config.js example for scss stylings

{
    test: /\.vue$/,
    use: [
        {
            loader: 'vue-loader',
            options: {
            	shadowMode: true
            }
        }
    ]
},
{
    test: /\.scss$/, //as example I used scss
    use: [
        {
            loader: 'vue-style-loader',
            options: {
                shadowMode: true
            }
        }
    ]
}

vue.config.js for Vue CLI 3

function enableShadowCss(config) {
  const configs = [
    config.module.rule('vue').use('vue-loader'),
  ];
  // based on common rules returned by `vue inspect`
  const ruleSets = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'];
  const ruleNames = ['vue-modules', 'vue', 'normal-modules', 'normal'];

  ruleSets.forEach((ruleSet) => {
    if (config.module.rules.store.has(ruleSet)) {
      ruleNames.forEach((rName) => {
        if (config.module.rule(ruleSet).oneOfs.store.has(rName)) {
          if (config.module.rule(ruleSet).oneOf(rName).uses.store.has('vue-style-loader')) {
            configs.push(config.module.rule(ruleSet).oneOf(rName).use('vue-style-loader'));
          }
        }
      });
    }
  });
  if (!process.env.BUILD_MODE) {
    process.env.BUILD_MODE = config.store.get('mode');
  }
  configs.forEach((c) => c.tap((options) => {
    options.shadowMode = true;
    return options;
  }));
}

module.exports = {
  chainWebpack:
    (config) => {
      enableShadowCss(config);
    },
  css: {
    sourceMap: true,
    extract: false,
  },
};

Note: for stylings to work, CSS must be bundled in JS and injected at runtime. Otherwise you will need to manually link the CSS under the shadowDOM inside your component (which is obviously an anti-pattern).

For additional ShadowDom examples see: https://github.com/bryanvaz/vue-custom-element-shadow-examples

Browser support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS
Chrome for Android
Android
59+ (--flag) 54+ 10.1+ 42+ 10.3+ 55+

Custom Elements v1 support

With optional polyfills

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS
Chrome for Android
Android
IE9+, Edge

Options

Additional, optional, third parameter to Vue.customElement() is options object. You can pass following methods.

'This' in callbacks points to Custom Element's DOM Node.

{
  // 'constructorCallback' can be triggered multiple times when e.g. vue-router is used
  constructorCallback() {
      console.info('constructorCallback', this);
  },

  // element is mounted/inserted into document
  connectedCallback() {
    console.info('connectedCallback', this);
  },

  // element is removed from document
  disconnectedCallback() {
    console.warn('disconnectedCallback', this);
  },

  // one of element's attributes (Vue instance props) is changed 
  attributeChangedCallback(name, oldValue, value) {
    console.info('attributeChangedCallback', name, oldValue, value);
  },
  
  // Root component's definition is passed to this hook just before Vue instance creation - so you can modify it
  beforeCreateVueInstance(RootComponentDefinition) {
    console.info('beforeCreateVueInstance', RootComponentDefinition);
    return RootComponentDefinition;
  },
  
  // Vue instance is created
  vueInstanceCreatedCallback() {
    console.info('vueInstanceCreatedCallback');
  },
  
  // in case of using vue-custom-element with modals, we destroy  it after defined timeout. Use "null" value if you want to manually "$destroy" it.
  destroyTimeout: 3000,
  
  // only needed when using lazy-loading - 'props' are not accessible on Custom Element registration so we have to provide them
  props: [],

  // you can set shadow root for element. Only works if native implementation is available.
  shadow: false,
  
  // you can set CSS that will be available in Shadow DOM.
  shadowCss: ''
}

Example options usage:

import MyElement from './MyElement.vue';

Vue.customElement('my-element', MyElement, {
  shadow: true,
  shadowCss: `
  .card {
     background-color: blue;
  }`
});

Callbacks are executed before the lifecycle hooks from Vue component passed to Vue-custom-element. It's a better idea to just use Vue component lifecycle hooks (e.g. created, mounted, beforeDestroy).

How does it work?

Vue-custom-element

Inside HTML tags of the defined custom element, Vue-custom-element will create:

  • Proxy component for seamless Hot Module Replacement, using render function for performance (Vue 2.x+)
  • Vue component is passed to Vue-custom-element

Custom Element HTML tag will expose API to interact with underlying Vue component - you can change HTML attributes or props, using JavaScript.

Testing

For advanced access, when exposed API is not enough, defined custom element can expose Vue instance via getVueInstance() method.

console.info(document.querySelector('widget-vue').getVueInstance())

Caveats

  • custom elements must contain a hyphen in its tag name. For example, my-element is valid, but myelement is not
  • in dev mode Vue will display console warning about element not being registered. It's desirable behaviour as we want to use browser's Custom Elements registration. You can use https://vuejs.org/v2/api/#ignoredElements to get rid of this warnings.

Contribute

Development

npm install
npm run dev:demo

Release

npm run build

This command will compile vue-custom-element.js and docs files.

Please take a note that npm run build will use config.build.assetsPublicPath, which is set to Github Pages path in config/index.js.

License

MIT

Comments
  • Vuetify with Vue-custom-element Breaks

    Vuetify with Vue-custom-element Breaks

    It is really a very good package when you want to integrate it to the existing application. A big thanks to you..

    I am using Vuetify in my vue project. In that case i am getting this error. I think it is unable to recognize any of the vuetify elements. Is there a work around for this to convert the vuetify template to html template before custom element parses it? Or can you do this as part of your package itself.

    vue.esm.js?efeb:578 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> at src\components\HelloWorld.vue

    Please let me know.

    opened by Meenakshise 36
  • Environment settings changes

    Environment settings changes

    Hi Karol,

    Basically this is what I do I build the Vue project that emits the app.js, manifest.js and vendor.js files. I refer these files in a different project (I have used Vue Custom Element). In my Vue Project i have an api url which also gets bundled when you build the Vue js file.

    module.exports = {
      NODE_ENV: '"production"',
      BASE_URL : '"https://localhost/VueAPI/"'
    }
    

    For my development server it is fine. I have also seen the concept of dev and prod.env files. But still i dont think so that will help me. Because we are deploying the built files using octopus. So based upon the deployment server we have to change the config url. How can i achieve this. If i change the config url I need to rebuild and then get the files and once again i have to update the files in the project where i have used right.

    opened by Meenakshise 29
  • Add documentation how to use the custom element in other projects

    Add documentation how to use the custom element in other projects

    @karol-f Hello, maybe I am just dumb, but I didnt get the cutom element working in another project. There are questions wich are still unanswered:

    1. whats the best way to setup a custom element in a singe project?

    vue init webpack

    and then put the component inside the src folder or how?

    1. how to build the custom element that it is ready to use in other projects?

    2. after 2, if I installed the element with npm, how to import it or is the <my-element> - tag enough?

    sorry if my question is at the wrong pace but I read the whole readme and locked at the demo page...

    opened by BennyAlex 26
  • [Question] Is it possible to add scss styles to the shadow dom?

    [Question] Is it possible to add scss styles to the shadow dom?

    Is it possible to add scss styles to the shadow dom?

    Like vue-web-component-wrapper at turned on appropritate shadow dom options in the 'vue-loader' and 'vue-style-loader'?

    question 
    opened by supproduction 21
  • CSS and Scoped CSS inside .vue files

    CSS and Scoped CSS inside .vue files

    Hi @karol-f , I tried vue-custom-element and found that, if we define css inside .vue component

    e.g.

    <style scoped>
    h1 {
      color: white;
    }
    </style>
    
    <template>
      <div class="card">
        <h1>My Element</h1>
      </div>
    </template>
    

    It's not get applied if we use shadow: true property during customElement creation.

    I was wondering if this default behaviour or something which needs to be supported in future releases ?

    Also, since the styles are added in head which is outside of shadowDom, it won't be applied automatically until provided in shadowCss property as string . I believe then, something needs to be added in webpack to properly apply it to shadowDom ?

    Just dumping ideas :D , maybe someone can create a sample repo for trying above out!

    opened by piyushchauhan2011 20
  • Vue.use with vue-custom-element

    Vue.use with vue-custom-element

    Good day. I have trouble using Vue.use() with vue-custom-element. I am using Vuetify just as described in specification - Vue.use(Vuetify) The problem is - this.$vuetify is unidentified when component is inside custom-element.

    I created sandbox - https://codesandbox.io/s/vuetify-playground-vl653?fontsize=14

    Is there a way to make this.$vuetify available inside custom element?

    opened by enf644 16
  • Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry'

    Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry'

    Hello there.

    Problem in short:

    We use for our website multiple vue-custom-elements for different purposes. All of them have their own codebase and Webpack build chain with different dependencies. All of them get initialized with different names aka "Vue.customElement('webcomponent-projectname-componentName', App);" and we load all of them with their own scripts to the page.

    Like following:

    <#assign NAME = 'componentName1'>
    <!-- CSS -->
    <link rel="stylesheet" href="/link/link/resources/${NAME}/css/app.css?v${buildVersion}">
    <!-- /CSS -->
    <div id="anchorpoint-${NAME}"></div>
    <webcomponent-projectname-${NAME} contractId="${contractId}"></webcomponent-projectname-${NAME}>
    <!-- JS -->
    <script src="/link/link/resources/${NAME}/js/vendor.js?v${buildVersion}"></script>
    <script src="/link/link/resources/${NAME}/js/app.js?v${buildVersion}"></script>
    <!-- /JS -->
    ------------------------------------------------------------------------------------------------
    <#assign NAME = 'componentName2'>
    <!-- CSS -->
    <link rel="stylesheet" href="/link/link/resources/${NAME}/css/app.css?v${buildVersion}">
    <!-- /CSS -->
    <div id="anchorpoint-${NAME}"></div>
    <webcomponent-projectname-${NAME} contractId="${contractId}"></webcomponent-projectname-${NAME}>
    <!-- JS -->
    <script src="/link/link/resources/${NAME}/js/vendor.js?v${buildVersion}"></script>
    <script src="/link/link/resources/${NAME}/js/app.js?v${buildVersion}"></script>
    <!-- /JS -->
    

    Now it seems that we get for every WC that is loaded after the first one following error:

    bildschirmfoto 2018-07-31 um 10 38 51

    Maybe you can enlighten me what we do wrong or what must be changed to stop that error from flooding our log.

    Thanks in advance.

    opened by ghost 15
  • How to include store?

    How to include store?

    Hi there,

    Big fan of your wrapper, very cool idea.

    I have a project that is taking my entire app, and turning it into a custom element.

    import 'es6-promise/auto';
    import 'babel-polyfill';
    
    import Vue from 'vue';
    import Vue2Filters from 'vue2-filters';
    import vueCustomElement from 'vue-custom-element';
    import 'document-register-element/build/document-register-element';
    
    import App from './App';
    import store from './store';
    
    import myPlugin from './plugins/myPlugin';
    import scrollToElement from './mixins/scrollToElement';
    import './filters';
    
    require('smoothscroll-polyfill').polyfill();
    
    Vue.config.productionTip = false;
    
    Vue.use(myPlugin);
    Vue.use(scrollToElement);
    Vue.use(api);
    Vue.use(Vue2Filters);
    Vue.use(vueCustomElement);
    
    Vue.mixin(
      scrollToElement,
    );
    
    Vue.customElement('my-custom-widget', App);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      template: '<App/>',
      components: { App },
    });
    

    I get lots of errors, such as - "TypeError: Cannot read property 'getters' of undefined"

    And I assume that this is due to me not importing my store into the custom element. I'm wondering the process of how to do this?

    I've also noticed that I get errors in IE as well - Object doesn't support property or method 'call' (this example doesn't even load in IE)

    I have document-register-element included, so I'm not sure what would cause this.

    Any help would be much appreciated!

    opened by BeauAgst 13
  • How to access vue-component methods from vue-custom-element

    How to access vue-component methods from vue-custom-element

    Issue: I am unable to access vue-component methods from vue-custom-element although I can access and set props of vue-component using vue-custom-element from my app.js file.

    Scenario: (1) I am not using any build system. (2) I am using precomplied minified vue.js and vue-custom-element.js into index.html as an external script.

    Files:

    • app.js file 1. created global vue-component using: var MyGlobalComponent = Vue.extend({...}); 2. registered vue-component: Vue.component('my-global-component', MyGlobalComponent); 3. accessed vue-component into a variable MyElement: var MyElement = Vue.component('my-global-component'); 4. created vue-custom-element: Vue.customElement('my-element', MyElement.options, {...}); 5. var myelmt = document.querySelector("#myelmt"); 6. // using myelmt I would like to access methods of my Vue component.
    • index.html file <my-element myvar="abc" id = "myelmt"/>< my-element>
    opened by arun9483 13
  • Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__

    Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__

    Hello @karol-f,

    I created 2 projects with CLI-3.

    The first is a library of components (Library), the second is an app (Back-Office) trying to import components from Library.

    I followed your rules to import main.js from Library to Back-Office but I got this error:

    Uncaught TypeError: Cannot read property 'call' of undefined
        at __webpack_require__ (app.js:786)
    

    In Network, my 2 app.js are well imported (200 for each).

    vue.config.js (Library):

    module.exports = {
      configureWebpack: {
        output: {
          filename: '[name].js',
        },
      },
      css: {
        loaderOptions: {
          sass: {
            prependData: `
              @import "@/scss/style.scss";
            `,
          },
        },
      },
      devServer: {
        port: 2600,
        allowedHosts: ['localhost:2800'],
      },
      lintOnSave: true,
    }
    

    After research, found that it maybe an error on webpack version but couldn't fix it. Did I miss something?

    Thank you,

    Guillaume

    waiting for feedback from issue author 
    opened by guillaumeduhan 12
  • How to get started?

    How to get started?

    Thanks for the amazing plugin :) Looks very promising. I'm going to build a chat widget with this one. However, the documentation doesn't look good. I can't start

    I started a new vuejs project using: vue init webpack testing

    then installed vue-custom-element using: npm install vue-custom-element --save

    imported the module in main.js using:

    import vueCustomElement from 'vue-custom-element'
    Vue.use(vueCustomElement);
    

    Whats next? When I run "npm run build" I get the same files as before like, app.js, manifest.js, vendor.js etc..

    1. How I declare which components to use?
    2. If I used scoped styles in a component, will that work? Where will be the css files placed? Inside the js file?
    3. Can one component contain another component inside?
    4. What if I want to external libraries like Socket.IO, axios etc??
    opened by gijo-varghese 12
  • Doesn't play nice with Decorated Typescript

    Doesn't play nice with Decorated Typescript

    When using: https://github.com/vuejs/vue-class-component

    And exporting a component using @Component syntax, this plugin dies and complains about the following:

     Cannot read properties of undefined (reading '_init')
    

    Non-decorated TS exports work just fine. Any help? Rewriting my whole codebase to be non-decorated would take quite some time.

    https://github.com/karol-f/vue-custom-element#javascript---register-with-vue-custom-element

    Seems to only understand this one very specific output.

    Seems to trip over:

            var Sub = function VueComponent(options) {
                this._init(options);
            };
    

    Problem to me seems that we already have a VueComponent, that's what @Component shims the output of your export to. Can we add a check to see if this is already done and support this other export type?

    Me logging my export that gets passed in to the second param of Vue.customElement Screen Shot 2022-07-31 at 4 13 36 PM

    opened by johnnyshankman 0
  • Gridsome customElement can't be imported

    Gridsome customElement can't be imported

    Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_10__.default.customElement is not a function Whenever customElement is called and bound in main.js. Regardless if customelement is generated from existing vue component, or made in the constructur.

    opened by YTavsan 0
  • Linking to fonts in shadow dom

    Linking to fonts in shadow dom

    First of all, thanks for this repo, it plugs a hole that Vue has and React doesn't and it's working great for my project.

    I've stumbled across one thing, with shadowDom enabled, I'm linking to fonts from Google they don't appear to work. It does the initial request and pulls the css file, but doesn't then get the WOFF so the font doesn't come through. Or in the case of Material Icons, they're rendered as placeholders.

    I've tried importing using @import url("") in the scss and also with the <link href="" tag in the Vue file itself.

    Any ideas how to get this working? I guess I could hold them locally from an npm package but this doesn't feel right.

    Thanks again

    opened by bts-ncollins 2
  • serve -s dist does not render:

    serve -s dist does not render: "404 the requested path could not be found"

    I did vue-cli-service build --target lib --name your-component-name src/main.js and builds correctly. Local server works fine. However cannot render after "serve -s dist".

    Any idea why this could be?

    Thanks in advance!

    opened by clara-miralles 2
  • v3.3.0 introduced bug with timing of custom element rendering

    v3.3.0 introduced bug with timing of custom element rendering

    I feel like this is perhaps something of an edge case, but it did break my VCE project.

    Basically, v3.3.0 seems to change when the HTML of the custom element is rendered. In previous versions, the HTML for a dynamically created element was available instantly, whereas in v3.3.0, there's a delay.

    https://codesandbox.io/s/romantic-firefly-hmzyl?file=/src/App.vue

    Try changing the VCE version in the dependency list and observe how the output (see App.vue line 17) in the browser's dev console changes.

    opened by craigrileyuk 1
Releases(v3.3.0)
"Compile" your VueJS components (sfc/*.vue) to standalone html/js/css ... python only (no need of nodejs). Support python components too !

vbuild "Compile" your VueJS components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vb

null 241 Oct 17, 2022
Reactive web application using Vue.js

KidsGuide Reactive web application using Vue.js, Node.js and PostgreSQL. Website: https://kynangsong.herokuapp.com How to run on localhost: cd fronten

Izay0i 0 Jan 20, 2022
Deliverance is a Web UI for the Space Traders API.

Deliverance Deliverance is a Web UI for the Space Traders API. You can access it at deliverance.forcookies.dev, or get it running yourself locally fol

Stumblinbear 14 Nov 30, 2021
Calculadora feita com HTML5, CSS3, Javascript, NodeJS e VueJS para o curso de Web Moderno da Cod3r Cursos

calculadora-vue Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Gabriel Santos Cardoso 3 Nov 26, 2021
[DEPRECATED] Jest preprocessor.js for Vue.js components (supporting html, pug, and babel) and TypeScript

❄️ DEPRECATION NOTICE ❄️ Official TypeScript and Jest support has been added to Vue.js 2.x, which has changed considerably since this repository has b

Locoslab GmbH 16 Dec 1, 2018
Utilities for testing Vue.js components using Jest

vue-jest-utils Utilities for testing Vue.js components using Jest. While written in TypeScript (and thus including type definitions), it can also be u

Locoslab GmbH 48 Feb 23, 2022
RequireJS plugin to async and dynamic load and parse .vue components

require-vuejs RequireJS plugin to async and dynamic load and parse .vue single file components This library has only 4Kb ( minified ). What this libra

Edgard Rosberg Duarte Leal 146 Feb 25, 2022
Vue.js util for intelligently merging data passed to functional components.

vue-functional-data-merge Vue.js util for intelligently merging data passed to functional components. (1K => 0.5K gzipped) Getting Started Why do I ne

Alex Regan 100 Nov 19, 2022
Load stringified or normal Vue components dynamically!

vue-dynamic Load stringified or normal Vue components dynamically! TOC Notice Usage Changelog License Notice This module is just a simple wrapper of V

JounQin 44 Nov 25, 2022
A solution to simplify import and use of Vue.js components

vue-import-and-use A solution to simplify import and use of Vue.js components Instalation $ npm install --save vue-import-and-use Without vue-import-a

Gabriel Bibiano 4 May 3, 2020
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X

Vue Add To Calendar A Vue.js renderless component providing 'Add to Calendar' functionality Less than 1kb gzipped Demo What is a renderless component?

Nicolas Beauvais 133 Aug 20, 2022
Vue rendering engine for Express.js. Use .Vue files as templates using streams

express-vue A Simple way of using Server Side rendered Vue.js 2.0+ natively in Express using streams If you want to use vue.js and setup a large scale

express-vue 1.3k Nov 21, 2022
A Vue project template with Loopback framework optionally with Vuex, Vue-router, and Auth boilerplaite

vue-loopback A Vue project template with Loopback framework featuring ES6, Gulp, and Jest for unit tests This template is for Vue 2.x only with vue-cl

InCuca Tech 52 Nov 18, 2021
vue-raven automatically reports uncaught JavaScript exceptions triggered from vue component

VueRaven VueRaven automatically reports uncaught JavaScript exceptions triggered from vue component, and provides a API for reporting your own errors.

Antério Vieira 91 Jul 27, 2022
Vue + Express.js = VueXpress / A server side rendering engine for Express.js. Use .vue files as your express.js templates.

Introduction VueXpress is a template engine for express.js. You can easily rendering *.vue templates on the server. Check out the usage information. I

null 101 Nov 9, 2022
A starter template for LoopBack 3.x And Vue 2.x with support for the new vue-cli v3

LoopBack Vue Starter The LoopBack Vue Starter template has a very minimal set of features pre-enabled. The starter template uses LoopBack v3.x for API

Ivan Dovgan 19 Nov 24, 2022
Aleksandr Komarov 4k Nov 25, 2022
Vue component to integrate Disqus count and comments in your application, with support for SPA

vue-disqus Vue component to integrate Disqus comments in your application Vue.js, with support for SPA and Vue 2.* Links Documentation Demo Contributi

Alan Ktquez 250 Nov 23, 2022
Vue.js and YouTube

Vue YouTube Embed This is a component for Vue.js to utilize YouTube iframe API easily. This is based on Angular YouTube Embed License MIT License inst

null 419 Nov 20, 2022