search

InCuca / vue-standalone-component

Vuejs template to build components with livecoding, tests, documentation and demos
MIT License
70 stars 6 forks source link

Test in browser #2

Closed artyprog closed 7 years ago

artyprog commented 7 years ago

Hello,

I can't see how you can integrate the standalone component in the browser. Could you give an example ?

I used to use vue build --prod --lib which does not work anymore

Regards

klarkc commented 7 years ago

Hey,

Please checkout the latest release and check this updated doc:

https://github.com/InCuca/vue-standalone-component#building

Let me know if you need something else opening this issue again. Thanks!

artyprog commented 7 years ago

Thank you very much but I still can't make it work

<html>
    <head>
        <script src="https://unpkg.com/vue" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.7.0/document-register-element.js"></script>
        <script src="my-cmp.min.js" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            Vue.component('my-cmp', window.MyCmp);
          </script>
          <my-cmp text="Hexxxxllo World!"></my-cmp>
    </body>
</html>

Nothing display on the page, what am I doing wrong ?

klarkc commented 7 years ago

You will need to wrap an element to use Vue components inside of a vue instance, in your example:

<html>
    <head>
        <script src="https://unpkg.com/vue" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.7.0/document-register-element.js"></script>
        <script src="my-cmp.min.js" charset="utf-8"></script>
    </head>
    <body>
                <div id="app">
            <my-cmp text="Hexxxxllo World!"></my-cmp>
                </div>
        <script type="text/javascript">
            Vue.component('my-cmp', window.MyCmp);  
                    new Vue({el: '#app'});
         </script>
    </body>
</html>
artyprog commented 7 years ago

Great :-) thanks again

srini85 commented 6 years ago

@klarkc - seem to be having issues with the cjs build and running it in a standalone html doc.

used this snippet here

<html>
    <head>
        <script src="https://unpkg.com/vue" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.7.0/document-register-element.js"></script>
        <script src="my-cmp.min.js" charset="utf-8"></script>
    </head>
    <body>
                <div id="app">
            <my-cmp text="Hexxxxllo World!"></my-cmp>
                </div>
        <script type="text/javascript">
            Vue.component('my-cmp', window.MyCmp);  
                    new Vue({el: '#app'});
         </script>
    </body>
</html>

but im getting the error that module is not defined in my minified file. i.e. the first line of the web packed file

module.exports = ...

Any idea if I am missing something?

srini85 commented 6 years ago

Just sorted it out.

had to use

Vue.component('my-cmp', window.MyCmp.default);