Vue components without webpack/npm/yarn

Question

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/vue@2.5.16/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

Have a look at the [async components documentation](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components), specifically the use of the [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Import) syntax. The latter should help you dynamically load a component into your Vue application. — miqh, Aug 10 '18 at 23:41

score 7 · Accepted Answer · answered Oct 31 '18 at 15:17

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

Does it also allow variables to interact with each other between components? — MK01111000, Feb 21 '19 at 21:00
Just note that Vue3 support is also available through https://github.com/FranckFreiburger/vue3-sfc-loader — Franck Freiburger, Dec 08 '20 at 07:59

score 1 · Answer 2 · answered Aug 11 '18 at 01:58

1

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.

answered Aug 11 '18 at 01:58

胡亚雄

2,161
1
19
21

Sorry I meant to say that was the way that I would import in vue-cli but I would like a way to do it similarly without vue-cli – echodrome Aug 13 '18 at 13:05

Vue components without webpack/npm/yarn

2 Answers2

Linked