# Installation Guide

## Prerequisites

- Vue 2.6 or higher
- Node.js 12 or higher
- npm or yarn package manager

## Installation Methods

### 1. NPM Installation (Recommended)

```bash
npm install vue2-premium-bbl-editor
```

### 2. Yarn Installation

```bash
yarn add vue2-premium-bbl-editor
```

### 3. CDN Installation

```html
<!-- Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>

<!-- Editor -->
<script src="https://unpkg.com/vue2-premium-bbl-editor"></script>
<link rel="stylesheet" href="https://unpkg.com/vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css">
```

## Setup Methods

### Method 1: Global Registration (Recommended)

```javascript
// main.js
import Vue from 'vue'
import PremiumBblEditor from 'vue2-premium-bbl-editor'

// Register the plugin
Vue.use(PremiumBblEditor)

// Or with options
Vue.use(PremiumBblEditor, {
  registerAllComponents: true // Registers all sub-components globally
})

new Vue({
  render: h => h(App),
}).$mount('#app')
```

### Method 2: Component Registration

```javascript
// In your component
import { PremiumBblEditor } from 'vue2-premium-bbl-editor'

export default {
  components: {
    PremiumBblEditor
  }
}
```

### Method 3: Individual Component Imports

```javascript
import {
  PremiumBblEditor,
  ToolbarMain,
  ImageModal,
  useEditor
} from 'vue2-premium-bbl-editor'
```

## Basic Usage

```vue
<template>
  <div>
    <PremiumBblEditor
      v-model="content"
      placeholder="Start writing..."
      @input="handleInput"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>Hello World!</p>'
    }
  },
  methods: {
    handleInput(content) {
      console.log('Content updated:', content)
    }
  }
}
</script>
```

## TypeScript Setup

If you're using TypeScript, the package includes full type definitions:

```typescript
// types are automatically imported
import { PremiumBblEditor, ToolbarConfig } from 'vue2-premium-bbl-editor'

interface ComponentData {
  content: string
  config: ToolbarConfig
}

export default Vue.extend({
  data(): ComponentData {
    return {
      content: '',
      config: {
        bold: true,
        italic: true,
        // ... other options
      }
    }
  }
})
```

## CSS Import

The package includes CSS that needs to be imported:

### Method 1: Automatic (when using Vue plugin)
CSS is automatically imported when you use `Vue.use(PremiumBblEditor)`

### Method 2: Manual Import
```javascript
import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
```

### Method 3: CSS in HTML
```html
<link rel="stylesheet" href="https://unpkg.com/vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css">
```

## Build Configuration

### Webpack Configuration

If you're using a custom webpack setup, you may need to configure it to handle the package:

```javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
```

### Vue CLI Configuration

For Vue CLI projects, add this to your `vue.config.js`:

```javascript
// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue2-premium-bbl-editor'
  ]
}
```

## Nuxt.js Setup

For Nuxt.js applications:

```javascript
// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/tiptap-editor.js', mode: 'client' }
  ],
  css: [
    'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
  ]
}
```

```javascript
// plugins/tiptap-editor.js
import Vue from 'vue'
import PremiumBblEditor from 'vue2-premium-bbl-editor'

Vue.use(PremiumBblEditor)
```

## Troubleshooting

### Common Issues

1. **"Cannot resolve module" error**
   - Make sure you've installed the package: `npm install vue2-premium-bbl-editor`
   - Check that your Node.js version is 12 or higher

2. **CSS not loading**
   - Import the CSS manually: `import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'`
   - Or use the CDN link in your HTML

3. **TypeScript errors**
   - Make sure you have the latest version of the package
   - Check that your `tsconfig.json` includes the package in `types`

4. **Build errors with Vue CLI**
   - Add the package to `transpileDependencies` in `vue.config.js`

5. **SSR issues with Nuxt.js**
   - Use client-side only plugin: `{ src: '~/plugins/tiptap-editor.js', mode: 'client' }`

### Browser Compatibility

The editor supports:
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+

For older browsers, you may need additional polyfills.

### Performance Optimization

For better performance in production:

1. **Tree Shaking**: Import only the components you need
2. **Code Splitting**: Use dynamic imports for the editor
3. **CSS Optimization**: Use PurgeCSS to remove unused styles

```javascript
// Dynamic import example
const PremiumBblEditor = () => import('vue2-premium-bbl-editor')

export default {
  components: {
    PremiumBblEditor
  }
}
```

## Next Steps

- Check out the [README.md](README.md) for full API documentation
- See [examples/](examples/) for usage examples
- Read the [CHANGELOG.md](CHANGELOG.md) for version history

## Support

If you encounter any issues during installation:

1. Check the [GitHub Issues](https://github.com/yourusername/vue2-premium-bbl-editor/issues)
2. Make sure you're using compatible versions of Vue and Node.js
3. Try clearing your node_modules and reinstalling: `rm -rf node_modules package-lock.json && npm install`