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

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.

Answer 2

You perfectly can, but with a lot of disadvantages. For example: you cannot easily use any preprocessor, like Sass or Less; or TypeScript or transpile source code with Babel.

If you don't need support for older browser, you can use ES6 modules today. Almost all browsers support it. See: ES6-Module.

But Firefox doesn't support dynamic import(). Only Firefox 66 (Nightly) support it and need to be enabled.

And if that wasn't enough, your web application will not be indexed. It's bad for SEO.

For example, Googlebot can craw and index Javascript code but still uses older Chrome 41 for rendering, and it's version don't support ES6 modules.

If that are not disadvantages for you, then you can do this:

1. Remove any thirty party library import like Vue, VueRouter, etc. And include those in the index.html file using script tags. All global variables are accesible in all es6 modules. For example, remove this line from main.js and all .vue files:

   import Vue from 'vue';
   

   And add this line in your index.html:

   <script src="https://npmcdn.com/vue/dist/vue.js"></script>
   

2. Rewrite all .vue files and change file extension to .js. For example, rewrite something like this:

   <template>
       <div id="home-page">
           {{msg}}
       </div>
   </template>
   <script>
   export default {
       data: function() {
           return { msg: 'Put home page content here' };
       }
   }
   </script>
   <style>
   #home-page {
       color: blue;
   }
   </style>
   

   to something like this:

   let isMounted = false; /* Prevent duplicated styles in head tag */
   
   export default {
       template: `
           <div id="home-page"> /* Put an "id" or "class" attribute to the root element of the component. Its important for styling. You can not use "scoped" attribute because there isn't a style tag. */
           {{msg}}
           </div>`,
       mounted: function () {
           if (!isMounted) {
               let styleElem = document.createElement('style');
               styleElem.textContent = `
                   #home-page {
                       color: blue;
                   }
               `;
               document.head.appendChild(styleElem);
               isMounted = true;
           }
       },
       data: function () {
           return {
               msg: 'Put home page content here'
           };
       }
   }
   

3. It is all. I put an example in this link

P.S. Text editing without syntax highlighting can be frustrating. If you use Visual Studio Code you can install Template Literal Editor extension. It allows editing literal strings with syntax highlight. For styles select CSS syntax, and for templates HTML syntax. Unknown tag in HTML are highlighted differently. For solve this, change the color theme. For example, install Brackets Dark Pro color theme or any theme do you like.

Regards!

Answer 3

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

Answer 4

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

<div id="header"></div>

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.