How to add an NPM vuejs component at end of an HTML page












0















I have a PHP application built with an MVC framework. On some pages I have complex, highly interactive components that have been created with vuejs. The components are written as single-file-components, and bundled with webpack. This works really well. At the bottom of the html page I load the component with a line such as the following:



<script src="js/my_vue_component"></script>


Now I want to complement this by using Vue components on a more ad-hoc basis. For example, I might use a Vue Date Picker component on a form. In these cases, I don't want the overhead of creating single-file-components.



What's the best way to go about this? Vue and it's third-party packages are managed via NPM.



I tried loading the code as follows:



<script>
import Vue from "vue";
import DatePicker from "vuejs-datepicker";
const date1 = new Vue({
el: '#respond_by',
components: {
'date-picker' : DatePicker
}
});
</script>


But I got an error saying that import declarations may only appear at top level of a module.



I then tried 'requiring' vue and vuejs-datepicker, but found that require is not defined.



Is there an easy way to go about this, without having to resort to a CDN, or should I just go back to single-file-components?










share|improve this question



























    0















    I have a PHP application built with an MVC framework. On some pages I have complex, highly interactive components that have been created with vuejs. The components are written as single-file-components, and bundled with webpack. This works really well. At the bottom of the html page I load the component with a line such as the following:



    <script src="js/my_vue_component"></script>


    Now I want to complement this by using Vue components on a more ad-hoc basis. For example, I might use a Vue Date Picker component on a form. In these cases, I don't want the overhead of creating single-file-components.



    What's the best way to go about this? Vue and it's third-party packages are managed via NPM.



    I tried loading the code as follows:



    <script>
    import Vue from "vue";
    import DatePicker from "vuejs-datepicker";
    const date1 = new Vue({
    el: '#respond_by',
    components: {
    'date-picker' : DatePicker
    }
    });
    </script>


    But I got an error saying that import declarations may only appear at top level of a module.



    I then tried 'requiring' vue and vuejs-datepicker, but found that require is not defined.



    Is there an easy way to go about this, without having to resort to a CDN, or should I just go back to single-file-components?










    share|improve this question

























      0












      0








      0








      I have a PHP application built with an MVC framework. On some pages I have complex, highly interactive components that have been created with vuejs. The components are written as single-file-components, and bundled with webpack. This works really well. At the bottom of the html page I load the component with a line such as the following:



      <script src="js/my_vue_component"></script>


      Now I want to complement this by using Vue components on a more ad-hoc basis. For example, I might use a Vue Date Picker component on a form. In these cases, I don't want the overhead of creating single-file-components.



      What's the best way to go about this? Vue and it's third-party packages are managed via NPM.



      I tried loading the code as follows:



      <script>
      import Vue from "vue";
      import DatePicker from "vuejs-datepicker";
      const date1 = new Vue({
      el: '#respond_by',
      components: {
      'date-picker' : DatePicker
      }
      });
      </script>


      But I got an error saying that import declarations may only appear at top level of a module.



      I then tried 'requiring' vue and vuejs-datepicker, but found that require is not defined.



      Is there an easy way to go about this, without having to resort to a CDN, or should I just go back to single-file-components?










      share|improve this question














      I have a PHP application built with an MVC framework. On some pages I have complex, highly interactive components that have been created with vuejs. The components are written as single-file-components, and bundled with webpack. This works really well. At the bottom of the html page I load the component with a line such as the following:



      <script src="js/my_vue_component"></script>


      Now I want to complement this by using Vue components on a more ad-hoc basis. For example, I might use a Vue Date Picker component on a form. In these cases, I don't want the overhead of creating single-file-components.



      What's the best way to go about this? Vue and it's third-party packages are managed via NPM.



      I tried loading the code as follows:



      <script>
      import Vue from "vue";
      import DatePicker from "vuejs-datepicker";
      const date1 = new Vue({
      el: '#respond_by',
      components: {
      'date-picker' : DatePicker
      }
      });
      </script>


      But I got an error saying that import declarations may only appear at top level of a module.



      I then tried 'requiring' vue and vuejs-datepicker, but found that require is not defined.



      Is there an easy way to go about this, without having to resort to a CDN, or should I just go back to single-file-components?







      vue.js npm






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 15 '18 at 8:12









      Kim PrinceKim Prince

      3,14985097




      3,14985097
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Read this: https://vuejs.org/v2/guide/components-registration.html#Local-Registration



          Inside your components script tag:



          <template>
          <div>
          <date-picker></date-picker>
          </div>
          </template>

          <script>
          import DatePicker from "vuejs-datepicker";
          export default {
          components: {
          'date-picker': DatePicker
          }
          }
          </script>


          You can also register the component globally by declaring it in your main javascript file where you create Vue.



          New components do NOT create a new Vue instance.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314950%2fhow-to-add-an-npm-vuejs-component-at-end-of-an-html-page%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Read this: https://vuejs.org/v2/guide/components-registration.html#Local-Registration



            Inside your components script tag:



            <template>
            <div>
            <date-picker></date-picker>
            </div>
            </template>

            <script>
            import DatePicker from "vuejs-datepicker";
            export default {
            components: {
            'date-picker': DatePicker
            }
            }
            </script>


            You can also register the component globally by declaring it in your main javascript file where you create Vue.



            New components do NOT create a new Vue instance.






            share|improve this answer




























              0














              Read this: https://vuejs.org/v2/guide/components-registration.html#Local-Registration



              Inside your components script tag:



              <template>
              <div>
              <date-picker></date-picker>
              </div>
              </template>

              <script>
              import DatePicker from "vuejs-datepicker";
              export default {
              components: {
              'date-picker': DatePicker
              }
              }
              </script>


              You can also register the component globally by declaring it in your main javascript file where you create Vue.



              New components do NOT create a new Vue instance.






              share|improve this answer


























                0












                0








                0







                Read this: https://vuejs.org/v2/guide/components-registration.html#Local-Registration



                Inside your components script tag:



                <template>
                <div>
                <date-picker></date-picker>
                </div>
                </template>

                <script>
                import DatePicker from "vuejs-datepicker";
                export default {
                components: {
                'date-picker': DatePicker
                }
                }
                </script>


                You can also register the component globally by declaring it in your main javascript file where you create Vue.



                New components do NOT create a new Vue instance.






                share|improve this answer













                Read this: https://vuejs.org/v2/guide/components-registration.html#Local-Registration



                Inside your components script tag:



                <template>
                <div>
                <date-picker></date-picker>
                </div>
                </template>

                <script>
                import DatePicker from "vuejs-datepicker";
                export default {
                components: {
                'date-picker': DatePicker
                }
                }
                </script>


                You can also register the component globally by declaring it in your main javascript file where you create Vue.



                New components do NOT create a new Vue instance.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 15 '18 at 14:38









                Simon HyllSimon Hyll

                95311023




                95311023
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314950%2fhow-to-add-an-npm-vuejs-component-at-end-of-an-html-page%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Florida Star v. B. J. F.

                    Danny Elfman

                    Lugert, Oklahoma