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.

Jay • Jul 1 '20 • Edited

yeah your right its not even in draft, i think in my opinion the benefit is you dont need to type/copy or write long url and you can easily find what are your dependencies. :)
another thing is for example (module 1 dependencies of module 2, but the module 1 didnt use the URL)
module 1

import { myExportVar } from 'module-1'

module 2

export { myExportVart }

Arswaw • Jul 3 '20

I had thought that this would essentially replace the package.json file.

If so, then import maps bring us one step closer to building data-driven web applications without Node or NPM.

Rasmus Schultz • Apr 14 '21

It's still not on standards track, it seems - though it is available and enabled by default in Chrome and Edge.

caniuse.com/import-maps

Pretty cool - this basically is the web equivalent of package.json 🙂

The main benefit of this is not about long or short URLs - it's about ensuring that, when several modules depend on the same things, they're also loading the same versions of those things. CDNs such as Snowpack try to address this by allowing URLs with version constraints, and performing redirects, but that's a half measure - it doesn't perform or scale well, doesn't let you lock to a specific version, etc...

We really need import-maps to proliferate into a standard. By then, for the first time in the history of the web, the platform will actually be able to stand alone, without all the clunky build tools and bundlers. 😄✊

Arswaw • Apr 19 '21

That's what I'm hoping! Much of the Node.js ecosystem is designed to accommodate the missing features in JavaScript and the web browser. It's too bad, because while the transition is needed, it will be a long one.

I didn't even know that import maps were used in Chrome and Edge. That just leaves Firefox and Safari if browser developers wanted to implement this without a standard, though I would prefer the standard existed.

You want deterministic dependencies. More than once, a buggy update to a single, one-liner package has broken millions of projects in a day. It's a good thing someone else agrees.

Maybe in 5 years, all the features we're talking about today will replace NPM dependence entirely.

Dwight Spencer • Nov 25 '21

That's actually impressive that a feature from backbone and request.js is finally make it into webkit based browsers.

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?

asaux19 • Jan 6 '20

in the src/main/resources/templates you can find the index.html as well as the main.js

Arswaw • Jan 7 '20

Thank you for your response. I will have a look at this after work.

Arswaw • Jan 13 '20

Hey, @asaux19 I just wanted to let you know that I'm still looking at your issue. I've been easier than expected in the past week and I hope to give you a solution soon.

 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?

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.

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.

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.

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!

floppyist • Jun 4 '19

Thanks for this.

P.S. There is a little typo in Step 6.

"Underneath the hr tag in main.js, add:" should be "Underneath the hr tag in main-template.js, add:"

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!

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.

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.

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

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

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.

José Padrón • Mar 13 '19

Nice article

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?

David Trillo • Feb 27 '19

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

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

after dev parcel main.js bundle to minifile it works

my sample vuevm.shopsthai.com

Mahmudul Hasan • Aug 16 '19

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

Arswaw • Mar 2 '19

What is that sample?

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.