title: Can we make vue.js application without .vue extension component and webpack?
body: <p><strong>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 browser .</strong> </p>
  
  <p>I want make <code>vue.js</code> application without <code>webpack</code> and without using <code>.vue</code> extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case.</p>
  
  <p>As we make component in <code>.vue</code> extension can be make component in <code>.js</code> extension and use application as we do in angular 1 where we can make whole app without any trans-compiler to convert the code.</p>
  
  <p>Can be done that in html , css , js file only and no webpack sort of thing.</p>
  
  <p>What i have done .
  <strong>index.js</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;title&gt;vueapp01&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong>  this file added in webpack load time </p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;img src="./assets/logo.png"&gt;
      &lt;a href="#/hello"&gt;Hello route&lt;/a&gt;
      &lt;a href="#/"&gt;Helloworld route&lt;/a&gt;
      {{route}}
      &lt;router-view/&gt;
       &lt;!-- &lt;hello&gt;&lt;/hello&gt; --&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'App',
    data () {
      return {
        route : "This is main page"
      }
    }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>router</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from '@/components/HelloWorld'
  import Hello from '../components/Hello'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path: '/hello',
        name: 'Hello',
        component: Hello
      }
    ]
  })
  </code></pre>
  
  <p><strong>I have done something like this . Can we do this by just html , css , js file only with not webpack to compile code . Like we do in angular 1 .</strong></p>
  
  <p>Thanks</p>