# vue-import
> Vue SFC loader of es module in browser
Latest version **0.2.3** (published 2023-11-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-import
pnpm add vue-import
yarn add vue-import
bun add vue-import
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.3 |
| Published | 2023-11-16 |
| First published | 2023-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | kianfang |
| Maintainers | kianfang |
| Keywords | vue, sfc, loader, import, browser, esm |
## Links
- npm: https://www.npmjs.com/package/vue-import
- Repository: https://github.com/kianfang/vue-import
- Homepage: https://github.com/kianfang/vue-import#readme
- Issues: https://github.com/kianfang/vue-import/issues
- npm.io page: https://npm.io/package/vue-import
## Alternatives
- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads
## Recent versions
- 0.2.3 (latest) — 2023-11-16
- 0.2.2 — 2023-11-16
- 0.2.1 — 2023-11-14
- 0.1.2 — 2023-05-10
## README
# vue-import
[](https://www.npmjs.com/package/vue-import)
[](https://www.npmjs.com/package/vue-import)
[](https://www.npmjs.com/package/vue-import?file=/dist/vue-import.esm-browser.prod.js)
[](https://github.com/kianfang/vue-import/actions/workflows/npm-publish.yml)
English | [简体中文](./README-zh_CN.md)
Import Vue components in a browser environment, i.e. [SFC](https://vuejs.org/guide/scaling-up/sfc.html) (*.vue) file.
If you don't want to maintain `package.json` and apply packaging tools such as `webpack`, then `vue-import` will help you.
## [CDN](https://www.jsdelivr.com)
ESM import:
```js
import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.js';
```
Minified:
```js
import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.prod.js';
```
## Instructions
### Basic Usage
```js
import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.prod.js';
const app = createApp();
app.component('my-component', await vueImport('./some/component.vue'));
app.mount('#app');
```
### Override Component Props
The `Promise` method is used, and you can also use the `async/await` method.
```js
import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.js';
const app = createApp();
vueImport('./some/component.vue', {
function beforeMount() {
console.log('beforeMount');
},
function mounted() {
console.log('mounted');
},
}).then((component) => {
app.component('my-component', component);
app.mount('#app');
});
```
## [Examples](https://unpkg.com/vue-import/example/index.html)
- `index.html`
```html
vue-import
```
- `component/common.vue`
Support loading of `` default export module
```html
Common component ({{ date }})
```
- `component/home.vue`
Load the Home component asynchronously
```html
{{ title }}
Home async component with router
```
- `component/welcome.vue`
Support multiple groups of `` embedding methods，when the component is uninstalled, the embedded styles will also be uninstalled.
```html
Welcome
Welcome component with router
```
---
_Source: https://npm.io/package/vue-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._