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

Solution 1:

As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files.

The code below is not from me and all credit goes to this jsFiddle creator:

Create an index.html file:

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>

<div id="app">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Home.js

const Home = { template: '<div>Home</div>' }

Foo.js

const Foo = { template: '<div>Foo</div>' }

router.js

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

index.js

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

Appreciate the framework...

Just a sidenote: .vue files are really awesome, you should definitely try them if not using them is not a requirement

Solution 2:

I have started learning vue.js also and I am not familiar with webpack and stuff and I also wanted to still separate and use .vue files as it makes management and code cleaner.

I have found this library: https://github.com/FranckFreiburger/http-vue-loader

and a sample project using it: https://github.com/kafkaca/vue-without-webpack

I am using it and it seems to work fine.