https://github.com/refi64/vue-module

Define Vue components using a web components-like syntax
https://github.com/refi64/vue-module

Last synced: 4 months ago
JSON representation

Define Vue components using a web components-like syntax

• Host: GitHub
• URL: https://github.com/refi64/vue-module
• Owner: refi64
• License: mit
• Created: 2017-07-15T18:49:56.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-27T21:59:42.000Z (almost 9 years ago)
• Last Synced: 2025-07-28T21:46:59.836Z (11 months ago)
• Language: HTML
• Size: 3.91 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.rst
  • License: LICENSE

Awesome Lists containing this project

README

          
vue-module

==========

Define Vue components using a web components-like syntax. See the ``example``

for more info.

You'll likely need to first load ``webcomponents-lite.js``, which can be

found `here `_.

Quick demo

**********

In *index.html*:

.. code-block:: html

  

    

    

    

    

    

     Vue.use(VueModule); 

    

    

  

  

    


      

    


    

      document.addEventListener('WebComponentsReady', function() {

        new Vue({el: '#example-app'})

      });

    

  

In *example-component.html*:

.. code-block:: html

  

    

    

    

      
{{message}}

    


    

      Vue.module('example-component', {

        data: function() {

          return { message: 'Hello!' };

        },

        // If you need to use v-once, then add:

        once: true,

      });

    

  

Styling

*******

When you use *vue-module*, your elements are automatically wrapped in a div with a class the

same name as your component. For example:

.. code-block:: html

  

    

    

    .my-component p { color: purple; }

    

    

      
My module!

    


    

      Vue.module('my-component');