Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

A better approach is to import the raw files and components and let Webpack compile

them in a single file. Unfortunately, the majority of components available in the wild
are distributed already compiled, so while it's very quick to import them given the official

template, you're more likely to encounter compatibility problems.

When importing external components, the first thing to do is to examine their
package.json file. Let's see what the vue-bulma-modal package contains in this file:

{

"name": "vue-bulma-modal",

"version": "1.0.1",

"description": "Modal component for Vue Bulma",

"main": "src/index.js",

"peerDependencies": {

"bulma": ">=0.2",

"vue": ">=2"

},

...

"author": "Fangdun Cai <[email protected]>",

"license": "MIT"

}

The file referred to by the main property is the file we are importing when we write the

following line in JavaScript:

import { CardModal } from 'vue-bulma-modal'

The src/index.js file, in turn, contains the following code:

import Modal from './Modal'

import BaseModal from './BaseModal'

import CardModal from './CardModal'

import ImageModal from './ImageModal'

export {

Modal,

BaseModal,

CardModal,

ImageModal

}