Externalizing VUE

Can I keep vue my vue code in external: .html .js .vue files without using Components and or is that the sole mission of Components, to externalize the VUE code? Like we can reference external .js files as well as .css files.

Hi. You can definitely write your Vue code as separate js and css files. However as your program grows it is very handy to start using single file components where one file contains both the HTML template, javascript and css.

You can read more about them here https://vuejs.org/v2/guide/single-file-components.html

1 Like

I was aware of components and it sounds like THE way to go, but for smaller projects, if you just want to put the “new vue” in an external file, how would you do that? I’ve tried to reference an external file from the head several different ways, with .vue or .js files, and nothing worked.

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Test</title>
</head>
<body>
	<div id="app"></div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	template: '<span>Vueeeeeee....!</span>'
})

This is absolutly the smallest example I can think of… The reason you put the script tags at the bottom is so the rest of the document is already read.

That’s the one thing I didn’t think of. And I can see why that would work, I even like the way it works. Very organized.

Thanks! It’s nice to know how to do this.

1 Like