Can we make vue.js application without .vue extension component and webpack?

Question

Note: Can we write vue.js large application without using any compiler for code like currently i see all example use webpack now to make vue.js code compatible for b

Answer 1

For sure you can. We did a project with Vue, and we had couple of problems during compiling .vue files. So we switched to structure with three separate files.

But be aware that you need webpack anyway. The idea of Vue was to split huge projects into components, so using template inside .js file it's pretty normal. So take a look at

html-loader And css-loader

Using these modules you can write something like this:

component.js

// For importing `css`. Read more in documentation above 
import './component.css'

// For importing `html`. Read more in documentation above
const templateHtml =  require('./component.html')

export default {
  name: 'ComponentName',
  components: { /* your components */ },
  mixins: [/* your mixins */ ],
  template: templateHtml,
  computed: .....
}

component.css

#header {
  color: red
}

component.html

BUT

You need to know that HTML file should be written in the same way as I you will have it in template property.

Also, take a look at this repo, maybe you will find something useful here

Vue-html-loader. It is a fork from html-loader by Vue core team.