How to add an NPM vuejs component at end of an HTML page
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
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
add a comment |
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
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
add a comment |
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
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
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
vue.js npm
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
asked Nov 15 '18 at 8:12
Kim PrinceKim Prince
3,14985097
3,14985097
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
add a comment |
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.
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
add a comment |
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.
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
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.
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
answered Nov 15 '18 at 14:38
Simon HyllSimon Hyll
95311023
95311023
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
