DEV Community

Use Vue to create a SPA without any Node modules

Arswaw on February 21, 2019

In this guide I will show you to create a static single-page application with VueJS and ES6 Modules. A friend of mine was trying to use AWS Cloud9...

Read full post

Jay • Jun 16 '20

nice article :) but attaching css on each component is quite difficult on this, you need to hack around so that you can have it for example

  mounted() {
    const style = document.createElement('style');
    style.innerHTML = styles;
    this.$el.prepend(style);
  }

by the way heres one of my example
plnkr.co/edit/tjhkcfNO15aTNhsU?pre...

Arswaw • Jun 28 '20

Yeah, I know. It's unfortunate that CSS is not modularized like JavaScript is. It would be nice if Vue supported binding CSS to components without build tools. I'm not sure if that's on their roadmap.

For now, the best way I can think of is to use prefixed styles for each component and put them in global CSS so that it's clear which CSS ruleset is meant to affect what.

Thanks for the comment.

Jay • Jun 28 '20 • Edited

i updated the example to make use goober css in js it uses prefix to share css :)
now problem solve with vue without bundler

plnkr.co/edit/tjhkcfNO15aTNhsU

Arswaw • Jun 28 '20

This is amazing! I didn't know about this. You can just import Goober from the CDN as an ES6 module and contain the CSS in a multiline string just like the template.

I think I need to update the article to reflect this. I will be sure to try this out in my projects.

I really appreciate the work you've put into this. Thanks for telling me about Goober and thanks for using my template!

Jay • Jun 29 '20 • Edited

have you heard import maps? you can use polyfill i think import maps it is already in draft not sure what stage it is.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Import Maps</title>
  <script defer src="https://unpkg.com/es-module-shims@latest/dist/es-module-shims.js"></script>
  <script type="importmap-shim">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js?module",
        "goober": "https://unpkg.com/goober/dist/goober.module.js?module"
      }
    }
  </script>
</head>
<body>
  <script type="module-shim">
    import Vue from 'vue'
    import App from './src/App.js'

    new Vue({
      render: h => h(App)
    }).$mount("#app")
  </script>
  <div id="app"></div>
</body>
</html>

Arswaw • Jun 29 '20

It's not on any stage because it's not on the W3C standards track. Maybe it will be picked up at some point.

I'm not sure what the benefit of this is over <script src="" or import Vue from 'vuecdn.com'

I hadn't heard of this though, and I'd like to know more.

asaux19 • Jan 5 '20

Awesome tutorial!
I would like to add a vuejs frontend to my backend (using spring boot). Is it possible to start the vuejs frontend off of the backend? It doesn't work just routing to the index.html...

Arswaw • Jan 6 '20

Thank you!

You wish to serve the Vue.js frontend from your Spring Boot API? Unfortunately I don't know much about Java, but I do know that my tutorial can be run from any static file server.

What specifically doesn't work?

asaux19 • Jan 6 '20 • Edited

So basically my backend calls the index.html when I open my localhost in the browser. To test it, I added a simple h1 test before the div id="app" and I can see that. But I get an error saying 'failed to load resource' main.js. I double-checked again, in all javascript files I have the exact same code as you.

Arswaw • Jan 6 '20

Does it give you error 499? You might try adding crossorigin to the HTML element. You should be able to see this in the article where I add in the main.js import to index.html

Which browser are you using?

Do you have script type="module"?

Are the two files in the same part of the directory?

Thank you for using this methodology. I would like to help you solve this problem. When we do, I can add the solution to the original post.

asaux19 • Jan 6 '20

I tried it with both Chrome and firefox. I did add type=module in the script tag. And yes, index.html and main.js are part of the same directory.
I will share my code on github with you. Maybe we will be able to find the reason for the error together and see whether it is an error that occurs more often in that context...

Arswaw • Jan 6 '20

I would be happy to assist you. Could you please link the exact file or folder you would like me to look at?

 Eric E. Dolecki • Aug 28 '19

Quick question. So I can create CSS that isn't SCSS (and scoped to each component). That's very workable. However, how can I assign properties, data, methods, etc. to my components when they are .js files (.vue can include these things, but I'm trying to avoid npm as your solution does).

Arswaw • Aug 28 '19

I'm glad you have your CSS down.

You are able to use anything you expect in the .js file that you could do with any Vue component.

If you find something that doesn't work, I would like to know.

I've tested this extensively. I've put watchers, computed, event listeners, and child components.

Does that answer your question?

 Eric E. Dolecki • Aug 29 '19

Can you paste in an example of the contents of a simple component implementation that has data like an array and property associated with it? In your example stuff there is const with HTML and then an export, but looking for the syntax that's more like what's in a Vue file

Arswaw • Aug 29 '19

A very large example from a personal project:

github.com/arswaw/happyweather/blo...

Another example with props and child components:

github.com/arswaw/happyweather/blo...

I even have an example of mixin use. I will have to find it.

 Eric E. Dolecki • Aug 29 '19

Yes, that's perfect! Thank you!!

Caribou • Nov 27 '19

Hello
Thanks for the tuto
It work on my server without node js, that the goal and thanks :D

But... If a open the index.html in my local computer, I always have the CORS problem with the
I don't understand why... Have another this same problem?

Caribou • Nov 27 '19

Well I have find this: npmjs.com/package/http-server
this work when I run the index.html in this http-server localy

Arswaw • Nov 27 '19

Where are you trying to run it that gives you the error?

Arswaw • Nov 27 '19

Can you take a screenshot of where the error is displayed?

Charly S. • May 20 '20 • Edited

This is absolutely beautiful. I couldn't make the router work but maybe there's some error I made, anyway I don't care I just plan on "enhancing" page by page (maybe do some ajax loading) and don't need/want node.js in the middle. I think this approach will be improved upon (along with SFC, the final blessing) in the future and will be a game changer for developers like me.

Arswaw • Jun 28 '20

I'm really glad you like it. I hope that you fix your router problem quickly. I wish I had seen your comment earlier so I could help but you seem to be managing fine since you're not making a SPA.

I think that Node.js is great but I don't think that the associated ecosystem should be required to make data-driven websites. I hope that more people see my project and find it as useful as you have.

Thanks.

Charly S. • Jun 28 '20

Hi Arswaw I finally made progress with the routing but it became a bit complex with the login/authorization process and all and I quit; I'm not planning to do a SPA (for now!)

My stuff is mostly PHP + Javascript, the traditional. But the ever increasing need for dynamic blocks, which I covered with JQuery (painfully; JQuery is great but not designed for that) I might move to Vue without issue for those "bricks" that I need to add to the page (axios is incredibly straightforward for ajax too).

I now found a very cheap hosting with node.js so now node.js is possible too, but somehow it introduces another layer, and for my usage, this is a very good toolset.

Looking forward to future articles of yours in the matter!

Arswaw • Jun 29 '20

Yeah, router guards can be difficult to set up. I'm guessing that's one of the tasks you had to do to prevent people from gaining unauthorized access by manually typing paths in the address bar.

PHP is tried and true. If it works for you that's great. I'm sure that you'll have no problem transferring that knowledge over to Node.js + Vue. You might also use the Fetch API instead of Axios if you haven't considered that already.

Thanks for your comment! I'd like to write some more articles on this to help spur additional interest from developers like you.

yadavravi2801 • Jan 21 '20

Thanks for this Awesome tutorial!

It is working perfectly on major browser but i am facing problem in Edge browser.

There is no error or warnings in the console.

So if there is any way i would like to know.

Thanks

Arswaw • Jan 21 '20

I have faced this issue before. It comes down to a bug with ES6 Modules in older versions of Edge. If you can, update to the latest version. It uses the same engine as Google Chrome.

If you can't update, I have used RollupJS to bypass this issue. It will grab all the ES6 Modules and put them in one file. You can use it from the command line.

Does this help.

Comment deleted

Arswaw • Nov 26 '19

Great job! This looks like an awesome project. Great documentation! I will look at this when I return to my computer.

Templar++ • Mar 6 '19

Can you share this code as a github repo?

Arswaw • Mar 6 '19

It is now hosted here.

Templar++ • Mar 13 '19

Out of curiosity - why are you loading the router like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>

but not vue.js too?

Arswaw • Mar 13 '19 • Edited

Because the developers don't include an ES6 compatible version of the router. Only Vue.

EDIT: Now they do.

Arswaw • Mar 6 '19 • Edited

Good idea. I will work on this tomorrow.

JL Griffin • Jan 15 '20

I'm receiving the error

main.js:8 Uncaught ReferenceError: Cannot access 'router' before initialization
at main.js:8

SAMER || DEV • Jul 5 '20 • Edited

You should. Define the variable first, then use it
// main.js :

//1

import Vue from 'cdn.jsdelivr.net/npm/vue@latest/di...'

import {
Navbar
} from './components/navbar.js'

import {
About
} from './components/about.js'

import {
MainTemplate
} from './templates/main-template.js'

//2
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/about',
component: About,
name: "About Us Page"
}]
})

//3

new Vue({

el: '#app', // This should be the same as your

from earlier.

components: {

'navbar': Navbar

},

router,

template: MainTemplate

})

Arswaw • Jun 29 '20

I'm surprised I didn't see your comment. I hope that you were able to fix this error.

Pritesh Usadadiya • Feb 25 '19

this is pure gold. I was just looking for something like this.

Arswaw • Feb 25 '19

Thank you for the appreciation!

Pablo Espinosa • Jun 20 '19 • Edited

This is amazing, thanks a lot for it.
Just a question, how would you add styles/css to the independent components? 🤓

Arswaw • Jun 28 '20

I was recently informed by Jay that you can use Goober CSS as a lightweight ES6-compatible way to add scoped CSS to each component while still avoiding Node.js!

Here's an example that Jay made.

plnkr.co/edit/tjhkcfNO15aTNhsU

Arswaw • Jun 20 '19 • Edited

That's a really good question. For now I've just been using global styles and then applying specific classes to the template files. An example:

<div class="specific-component-class">

This class is only used for this component, but is stored in a global file like style.css

CSS Modules might be the key, if we can use them without Node.js

Pablo Espinosa • Jul 16 '20

Hey
I've found out that you can use scoped CSS to solve that issue. And works flawlessly.
vue-loader.vuejs.org/guide/scoped-...

Carlos Ernesto • Aug 7 '19

Great! Thanks a lot it is very very helpful! Can you explain how to install Vue CLI without any package manager? Is that even possible?

Thanks in advance.

Arswaw • Aug 8 '19

I wouldn't bet on it. I will look into it for you, but I will probably end up having to finish a lightweight CLI for non-Node environments.

Carlos Ernesto • Aug 8 '19 • Edited

Your lightweight CLI for non-Node environments will have to be installed with any package manager? About look for if it's possible to install Vue CLI without any package manager, I'm sorry I don't want to waste your time, I just ask because I have googled about installing Vue CLI but everything I've found it's using package managers. My problem with package managers is that I've installed Node (and Yarn) but when I try to install any package I always get errors about SSL wrong versions or other kind. I also tried to find how to fix this but none of the 'solutions' I find works for me. *And I want to jump directly into learn how to develop using Vue or use other frameworks in my projects without becoming an expert in package managers.

Arswaw • Aug 9 '19

I would make it independent of a package manager if I could.

It's unfortunate that you're having so much trouble with NPM. Are you using Windows? Try running command prompt in administrator mode.

You can use the methodology in my article to jump right into Vue development.

Holy • Aug 1 '20

Moved to tears, thanks, this is what I really want. 👏
I like frontend technology but I am afraid of nodejs ecology -- thousands of code snippet.

Arswaw • Aug 3 '20

It's great that my article has helped you so much! I am attempting to prove that you don't need thousands of code snippets in order to build a website. It's good that people like you are interested in that idea.

Thongchai Lim (样生海) • Mar 2 '19 • Edited

after dev parcel main.js bundle to minifile it works

my sample vuevm.shopsthai.com

Arswaw • Mar 2 '19

What is that sample?

Mahmudul Hasan • Aug 16 '19

Sir,
I see your sample "vuevm.shopsthai.com", its awesome,
Can you share the code of your sample, Please ......!!!

Soli Tsaagane • Nov 18 '19

Greetings from South Africa 🇿🇦

Thanks for the awesome article. Is there a git repository that I clone to use as reference for this tutorial?

Arswaw • Nov 18 '19

Wow! I can't believe the power of the Internet! My post has reached people all the way in South Africa.

Here is the repository. It's set up to use GitHub's template feature. You should be about to see "Use this template" if you view the repository while logged in. But only if you want to. You can clone like normal.

github.com/arswaw/VueSpaNONODE

David Trillo • Feb 27 '19

Thank you for the solution, when NodeJS is not available.

Michal Mašek • Sep 9 '19

Hello, Vue-router also has an esm browser version on github.com/vuejs/vue-router/blob/d...

codesandbox.io/s/vue-no-node-sk1wt

Arswaw • Sep 10 '19

Thanks for the heads up. I saw that earlier but I haven't made the change yet.

Would you like to make a pull request?

José Padrón • Mar 13 '19

Nice article

Arswaw • Aug 27 '19

I see that you are right! I don't know why I didn't notice your comment before.

I added the fix. Thank you!

Comment deleted

Arswaw • Mar 3 '19

Vue is just code loaded into a .js file in my example. What I mean is there is no node_modules folder or any dependence on Node at all.

Kay • Apr 13 '21

very helpful! but could you tell me how to use external plugins as components? is there any example that I refer to?

Arswaw • Apr 19 '21

Can you give me an example of what you mean by "external plugin?" If you mean, something traditionally imported as a node_module, then you could try using a CDN.

If it's an ES6 module, you can import that directly using the language.