< Home
Buildless Vuejs
May 20, 2019

Cover image

The Slide

This isn't a, "this is how you should do it", post. This more like how you could do it and works well for something like an internal dashboard. I started with this strategy because I figured it would help my coworkers be able to jump right into the source code. The only requirement to run locally or in production is an HTTP server. This makes deployment very easy. Copy files to the server.

1x Magnification

These 2 libraries make it all work. A side benefit to this approach is you get configurable code splitting.

.
├── [page-name]
│   └── index.html
├── css
│   └── app.css
├── favicon.ico
├── index.html
└── js
    ├── [page-name].js (each page gets a js file)
    ├── bootstrap.js (configure requirejs & global functions)
    ├── components
    │   ├── [page-name]
    │   │   └── page-component.vue
    │   └── global-component.js
    ├── library(s).js
    └── pages
        └── [page-name]
            ├── page1.vue
            └── page2.vue

Every index.html file gets 3 things to work.

  1. require.js - library which will load required files dynamically
  2. bootstrap.js - configurations for require.js and global utilities
  3. [page-name].js - page specific requires, initial state, Vue component mounting, and anything else you need for the page

10x Magnification

// [page-name].js
require([
  "Vue"
  // library(s).js,

  // components/global-component.js,

  // components/[page-name]/page-component.js,
], function(Vue/*, library(s)*/) {
  new Vue({
    el: '#app',
    data: window.data
  });
});

In the above snippet, require([<stuff>, is where the "code splitting" happens. Of course everything in that array will be a network request. Another very nice benefit is that you don't have to register your vue components! The last benefit I found is that the .vue files are easily readable in devtools.

100x Magnification

In my setup I went the lazy route and use a global state object (window.data) to control the vuejs data. This approach can be tricky to understand when js will observe a change. But if I'd like to mock a state, it is pretty pleasant just modifying that object in the console.

For reference:

kyleparisi/buildless-vuejs

Get updates