Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js single file components WITHOUT a build process

I love vue.js because of its simplicity, which means I can hack a quick one-page SPA with modern, intuitive data-binding syntax and no complex toolchain.

I also love the idea of single-file components which means there is a single place (*.vue file) where each component stores DOM, styling and scripted functionality.

However, I want to use single-file components without wasting time on managing a build process every time I put an app together. In short, I want the benefits of component management without the overhead of a build toolchain, which means letting the browser do the heavy lifting for bootstrapping each *.vue file via XMLHttpRequest and DOM rendering. Making sure that we replace module.exports and import calls with corresponding Vue.component() functionality.

I'd love to know if anyone has come across a client-side (only) solution for using *.vue files on the browser. Surely this has been done already?

like image 524
Steven de Salas Avatar asked Nov 27 '16 14:11

Steven de Salas


People also ask

What is Vue single file component?

Vue Single-File Components (a.k.a. *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file. Here's an example SFC: vue <script> export default { data() { return { greeting: 'Hello World!'

Can I use Vue without Webpack?

Is it really necessary to use webpack to build Vue. js-powered applications? The answer is no. Thanks to native browser support for JavaScript Modules, it's easier than ever to build powerful JavaScript applications without using any build tools.

What is a single file component?

Single File Components(SFCs) are a style of application organization used by JavaScript UI libraries where each file represents a single component in all aspects. Typically they resemble an HTML document where you have HTML tags, Style Tag, and Script Tag all in a file.


3 Answers

I'm absolutely certain this doesn't exist yet, because while it might seem relatively easy, certain functionalities would make it quite difficult to implement. For example:

  1. You don't necessarily import just other .vue components, you can import random external dependencies. Which means that the browser now needs to download and parse npm modules, handle their dependencies, etc.
  2. Different sections of your .vue component (template, logic and style) can be written in languages other than HTML, JS and CSS. Which means the browser now also needs to download a compiler/transpiler for Jade, CoffeeScript, LESS or whatever else you're using and run your code through it. Mind, there's no guarantee that such a transpiler written in JavaScript actually exists, because a node module used in a regular build process could be just a wrapper for some external library which can't be run in a browser.
  3. Styling in a .vue component can be scoped, which means that you now need to parse the template of a component to insert randomly generated IDs as element attributes AND parse the styling of the same component to insert those same IDs in your CSS selectors so that your styling ends up being scoped.

And those are just the most obvious ones off the top of my head. Sure, you could severely limit yourself and not use any of those features, but then it's not really a .vue component anymore, is it?

If you really want to avoid a build process at all costs and are willing to accept the limitations of not using any of the features above, why not just use a single JS file:

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

You have to load them in the correct order, but there you have it, a poor man's single file component.

like image 67
mzgajner Avatar answered Oct 12 '22 19:10

mzgajner


Another way is use: http-vue-loader

Load .vue files directly from your html/js. No node.js environment, no build step.

https://cdn.jsdelivr.net/npm/[email protected]/src/httpVueLoader.min.js

Same to in unpkg cdn

https://unpkg.com/http-vue-loader

Here a example

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

Or you can load your components from external like

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

See the example at : https://codepen.io/mikechen2017/pen/wEdbBN/

like image 6
LT-Sites Avatar answered Oct 12 '22 19:10

LT-Sites


It's 2020 and Evan You wrote https://github.com/vuejs/vite just last week.

I'd love to know if anyone has come across a client-side (only) solution...

Vite has a server, but it feels like the old days of Web when we just had Notepad. I had run the demo in less than 5 minutes, it's that easy.

  • it covers or aims to cover the finer details that @mzgajner mentions

For now, I would say that it's only gotcha is that you are in Vue 3 beta realm right away if you use it. No Vue 2.x.

like image 2
akauppi Avatar answered Oct 12 '22 18:10

akauppi