# Quick Setup Guide

## 🔍 NEW: Diagnostic Tool

If you're experiencing the "Loading Premium Editor..." issue, use our diagnostic tool first:

```vue
<template>
  <div>
    <DiagnosticTool />
  </div>
</template>

<script>
import { DiagnosticTool } from 'vue2-premium-bbl-editor'

export default {
  components: { DiagnosticTool }
}
</script>
```

The diagnostic tool will:
- ✅ Check all required dependencies
- ❌ Show exactly what's missing
- 📋 Provide copy-paste install commands
- 🧪 Test the editor once dependencies are installed

## ⚠️ IMPORTANT: Complete Installation Required

The editor shows "Loading Premium Editor..." when dependencies are missing. You need ALL of these:

## 🚀 Complete Installation (Copy & Paste)

**Step 1: Install ALL dependencies at once:**
```bash
npm install vue2-premium-bbl-editor @vue/composition-api @tiptap/core @tiptap/vue-2 @tiptap/starter-kit @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-highlight @tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link @tiptap/extension-font-family @tiptap/extension-code @tiptap/extension-code-block @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-task-list @tiptap/extension-task-item @tiptap/extension-placeholder prosemirror-commands prosemirror-dropcursor prosemirror-gapcursor prosemirror-history prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-tables prosemirror-transform prosemirror-view
```

**Step 2: Setup main.js (REQUIRED for Vue 2.6):**
```javascript
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import PremiumBblEditor from 'vue2-premium-bbl-editor'
import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
import App from './App.vue'

// Required for Vue 2.6
Vue.use(VueCompositionAPI)

// Register the editor
Vue.use(PremiumBblEditor)

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

**2. Use in your component:**
```vue
<template>
  <div>
    <PremiumBblEditor
      v-model="content"
      placeholder="Start writing..."
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>Hello World!</p>'
    }
  }
}
</script>
```

## ✅ That's it!

Your editor should now load properly without the "Loading Premium Editor..." message.

## 🔧 If Still Having Issues

1. **Use the Diagnostic Tool first** (see above)

2. **Clear node_modules and reinstall:**
   ```bash
   rm -rf node_modules package-lock.json
   npm install
   ```

3. **Check for console errors** in browser DevTools

4. **See TROUBLESHOOTING.md** for detailed solutions

5. **Create an issue:** https://github.com/Mahadi74/vue2-premium-bbl-editor/issues