@sdc-monitor/demo/packages/vue/README.md

<div align="center"> <a href="#" target="_blank"> <img src="https://i.loli.net/2021/07/28/EvPwd4NjVH3tBfO.jpg" alt="mito-logo" height="90"> </a> <p>A Lightweight SDK For Monitor Web</p>

# @sdc-monitor/vue

# ⚠️ attention

**If you want to import in weixin miniprograme,please replace `@sdc-monitor/browser` to `@miotjs/wx-mini`**



# 🛠️ Install

```bash
# using npm
npm i @sdc-monitor/vue @sdc-monitor/browser
# using yarn
yarn add @sdc-monitor/vue @sdc-monitor/browser
```

read the [mito-doc](https://mitojs.github.io/mito-doc/#/sdk/guide/introduction) to konw more info


# 🥳 Usage

### Vue2.X

```typescript
// main.js
import Vue from 'vue'
import { init } from '@sdc-monitor/browser'
import { vuePlugin } from '@sdc-monitor/vue'

// multiple instances
const MitoInstance = init({
  // set debug true to convenient debugger in dev,set false in prod
  debug:true,
  vue: Vue,
  dsn: 'https://test.com/yourInterface',
  maxBreadcrumbs: 100
},[vuePlugin])

```

### Vue3.x
```typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { init } from "@sdc-monitor/browser";
import { vuePlugin } from "@sdc-monitor/vue";

const app = createApp(App)
const MitoInstance = init({
  // set debug true to convenient debugger in dev,set false in prod
  debug:true,
  vue: app,
  dsn: 'https://test.com/yourInterface',
  maxBreadcrumbs: 100
},[vuePlugin])
```