CODEWITHSUNDEEP
vue.js
AngeloC
AngeloC

Reputation: 3533

how to write a vue component in a plain js file? [Vue.js with no build and no webpack]

I know there is this .vue file components, what I want to do is, using a simple js file and require it in the main js file, example I have hello.js

Vue.component('Hello', {
template: '<span>Hello</span>'
})

Then how to use this hello.js file in the main.js without going to vue building thing? Thanks

Upvotes: 0

Views: 742

Answers (1)

bbsimonbb
bbsimonbb

Reputation: 29020

If you don't want a build step, you need to get everything to work with <script> tags in your html. So instead of an import statement in your main.js, reference your component file in a script tag.

<script> tags are not so bad. You lose the ability to assign a name to the called file in the calling file, and you have to declare all your references at the top of the tree, in the markup. For huge apps, those are pretty big defects, but if your needs are humble, that will get you by for a while.

You can use ES6 import statements in client side js, but only if you don't care about Firefox and Edge. You just need to be clear about the steps and the sequence. Components need to be registered, either globally, as in your example, or locally in the calling component. Obviously, the object defining the component needs to be present at the moment of the registration :-)

Upvotes: 1

Related Questions