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 browser .

I want make vue.js application without webpack and without using .vue extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case.

As we make component in .vue extension can be make component in .js extension and use application as we do in angular 1 where we can make whole app without any trans-compiler to convert the code.

Can be done that in html , css , js file only and no webpack sort of thing.

What i have done . index.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js this file added in webpack load time

// 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: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a href="#/hello">Hello route</a>
    <a href="#/">Helloworld route</a>
    {{route}}
    <router-view/>
     <!-- <hello></hello> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      route : "This is main page"
    }
  }

}
</script>

router

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
    }
  ]
})

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 .

Thanks

Hammerbot · Accepted Answer · 2018-01-25T12:32:52.840

24

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

edited Jan 25 '18 at 12:32

answered Jan 25 '18 at 12:21

Hammerbot

15,696
9
61
103

No in this way i will have to write whole html in `const Home = { template: '
Home
' }` . Let me add code . – Himanshu sharma Jan 25 '18 at 12:23
Well you juste have to separate your code, let me edit my response – Hammerbot Jan 25 '18 at 12:29
I want not using `.vue` like component instead using `.js` because they are compile directly in the browser , no webpack or compiler of code . If that is possible that will be nice . – Himanshu sharma Jan 25 '18 at 12:32
Yes, I edited my response hoping that it suits your needs – Hammerbot Jan 25 '18 at 12:33
1

Ho, you mean it's just the fact that you don't want to write the html into the `template` property? In that case you can use https://vuejs.org/v2/guide/components.html#X-Templates – Hammerbot Jan 25 '18 at 12:35
1 for effort . will check this approach. – Himanshu sharma Jan 25 '18 at 12:40
Can you tell how you can apply `.js` on Home.js template ? I want two way binding on that template . – Himanshu sharma Jan 29 '18 at 14:25
What about loading the template via XHR? – user3599803 Feb 25 '18 at 07:40
webpack, babel and other js library really sucks specially when they upgrade, waste your time, because old version wont be compatible with the new one. – LEMUEL ADANE Sep 15 '18 at 20:43
i tried to use webpack, but i have a problem with a js library import without NPM, i get the Module not found: Error: Can't resolve './locale' message with some jquery libraries, so that is why I not use webpack – kscius Nov 19 '18 at 21:41
I have a question. How would you import the Foo.js component into Home.js component? – ApplePie Feb 20 '19 at 16:10
1

With this configuration I would include `Foo` before `Home` on the page so `Foo` would be defined in `Home` – Hammerbot Feb 21 '19 at 07:55

score 14 · Answer 2 · answered Jun 10 '18 at 20:38

14

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.

answered Jun 10 '18 at 20:38

yeahman

2,737
4
21
25

1

http-vue-loader is awesome, with one drawback: I can't find any way to place a breakpoint in the javascript within the .vue file. @Franck, would love to hear if there's a secret trick here. – Jim B. Jun 17 '19 at 18:02
2

@JimB. The secret trick (for Vue3), try [vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader) – Franck Freiburger Dec 13 '20 at 17:13
@FranckFreiburger Great, thanks for this contribution. However, I'm unable to load the moment-timezone library with vue3-sfc-loader. I tried the second approach in https://stackoverflow.com/a/51387489 but that results in a failed GET request on */moment*. Any idea? should I post a new question? – VH-NZZ Apr 15 '21 at 18:24
1

@VH-NZZ, you can fill a new issue here https://github.com/FranckFreiburger/vue3-sfc-loader/issues then I'll look at your problem in detail – Franck Freiburger Apr 15 '21 at 18:39

score 6 · Answer 3 · edited May 09 '20 at 18:33

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:

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>
```

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'
        };
    }
}

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!

Wow, Template Literal Editor rocks! – MarredCheese Aug 12 '19 at 00:00 — MarredCheese, Aug 12 '19 at 00:00

Yevhenii Herasymchuk · Answer 4 · 2018-01-25T15:33:38.930

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.

You means we can not make vue.js application without webpack ? webpack is compulsory. — Himanshu sharma, Jan 29 '18 at 12:43
If you need to use Vue without webpack - you can just add this to your index.html file ``. But, if the problem is to create separate three files for Vue application, you need some system that will build everything for you. So as an example you can use webpack. — Yevhenii Herasymchuk, Jan 29 '18 at 12:59

Marinos An · Answer 5 · 2021-07-19T10:20:14.523

In vuejs 3 you you can do it in an ES6 modular fashion (no webpack or other tools required):

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      { 
        "imports": {
          "vue": "https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js",
          "vue-router": "https://unpkg.com/vue-router@4.0.5/dist/vue-router.esm-browser.js",
          "html" : "/utils/html.js"
        } 
      }
      </script>    
    <script src="/main.js" type="module"></script>    
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

main.js

import { createApp, h } from 'vue';
import {createRouter, createWebHashHistory} from 'vue-router';
import App from './components/App.js';

const routes = [//each import will be loaded when route is active
  { path: '/', component: ()=>import('./components/Home.js') },
  { path: '/about', component: ()=>import('./components/About.js') },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})

const app = createApp({
  render: () => h(App),
});

app.use(router);
app.mount(`#app`);

components/App.js

import html from 'html';
export default {
  name: `App`,
  template: html`
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>  
    <router-view></router-view>
  `};

components/Home.js

import html from 'html';
export default { 
    template: html`
        <div>Home</div>
    `};

components/About.js

import html from 'html';
export default { 
    template: html`
        <div>About</div>
    `};

utils/html.js

// html`..` will render the same as `..` 
// We just want to be able to add html in front of string literals to enable 
// highlighting using lit-html vscode plugin.
export default function () {
    arguments[0] = { raw: arguments[0] };
    return String.raw(...arguments);
}

Notes:

Currently (04/2021) importmap works only on chrome (firefox in progress). To make the code compatible with other browsers also, just import (on each .js file) the dependencies directly from the urls. In this case though vue-router.esm-browser.js still imports 'vue', so you should serve an updated version of it, replacing import { .... } from 'vue' with import { .... } from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js'
To avoid waterfall loading effect, you can add <link rel="modulepreload" href="[module-name]"> entries to index.html to start preloading some or all modules asynchronously before you need them.

A Related article

This is an awesome solution. I passionately hate compilers like webpack and passionately love ES. For many people like me this will open the gates. — Zortext, Jul 17 '21 at 12:11

Andrew · Answer 6 · 2022-12-01T21:31:12.763

Vue can be included on a single html page quite simply:

Vue 3 minimal example:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Vue 2 minimal example, with Vuetify

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

vue 2 guides:

vue 3 guide: https://v2.vuejs.org/v2/guide/installation.html#CDN

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

6 Answers6

Linked