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

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

Answer 2

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