Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue components without webpack/npm/yarn

Tags:

vue.js

vuejs2

I know with vue-cli importing components is really simple. However, would it be possible to import components to a vue project that is not using vue-cli?

For example my index.html would look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue components</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">  </script>
    <script src="https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/archive/mdbvue.js">  </script>
  </head>
  <body>
    <div id="vue-app">
      <Btn color="danger">Test Button</Btn>
    </div>
  </body>
</html>

And my app.js:

import { Btn } from 'mdbvue'

new Vue({
  el: '#vue-app',
  components: {
    Btn
  },
  data: {
  }
}

If it would not be as simple as my example is there a tutorial somewhere to figure out how to get this working without using npm or yarn?

Thanks

like image 904
echodrome Avatar asked Aug 10 '18 17:08

echodrome


2 Answers

It might be bit late however I believe in better late than never!!

I came across the simillar situation where I do not want to use any build tool as I feel those build tools are bit of overkill.

There is a js plugin you could give it a go. (I have not used it though as we moved to AngularJS + TypeScript + Visual Studio 2017 - which met our requirement).

Plugin: http-vue-loader

Link : https://github.com/FranckFreiburger/http-vue-loader

Example : on codepen dot io /cscolabear/project/editor/AQLQLO

Requirements

  • Vue.js 2 (compiler and runtime)
  • es6-promise (optional, except for IE, Chrome < 33, FireFox < 29, ... )
  • webserver (optional)...

How it works

  • http request the vue file
  • load the vue file in a document fragment
  • process each section (template, script and style)
  • return a promise to Vue.js (async components)
  • then Vue.js compiles and cache the component

Notes

The aim of http-vue-loader is to quickly test .vue components without any compilation step. However, for production, I recommend to use webpack module bundler with vue-loader, webpack-simple is a good minimalist webpack config you should look at. BTW, see also why Vue.js doesn't support templateURL.

Caveat

Due to the lack of suitable API in Google Chrome and Internet Explorer, syntax errors in the section are only reported on FireFox.

Credits : Franck Freiburger

like image 176
Vinnie Avatar answered Oct 13 '22 01:10

Vinnie


import { Btn } from 'mdbvue'

From the codes u posted, u already have used es6 modules. So at least you should use webpack with babel-loader, otherwise, the browser will not support the grammar above.

like image 21
胡亚雄 Avatar answered Oct 13 '22 00:10

胡亚雄