Vue Dev Notepad

A floating, draggable, and resizable notepad component designed specifically for Vue.js developers with per-page note persistence.

✨ Features

• 🖱️ Draggable - Click and drag to move around the screen
• 📏 Resizable - Resize to your preferred dimensions
• 💾 Auto-save - Every keystroke is automatically saved
• 📄 Per-page notes - Each route/page has its own separate notepad
• 🔄 Persistent - Notes persist across browser sessions
• 🎨 Clean design - Minimalistic and modern appearance
• ⬇️ Minimize/Maximize - Collapse when not needed
• ❌ Show/Hide - Close and reopen as needed
• 🎯 Position memory - Remembers position and size per page

📦 Installation

npm install vue-dev-notepad

🚀 Usage

As a Plugin (Recommended)

// main.js
import { createApp } from 'vue'
import VueDevNotepad from 'vue-dev-notepad'
import 'vue-dev-notepad/dist/style.css' // Import styles
import App from './App.vue'

const app = createApp(App)
app.use(VueDevNotepad)
app.mount('#app')

Then use in any component:

<template>
  <div>
    <DevNotepad />
  </div>
</template>

As a Component

<template>
  <div>
    <DevNotepad
      :default-position="{ x: 50, y: 50 }"
      :default-size="{ width: 350, height: 300 }"
    />
  </div>
</template>

<script setup>
import { DevNotepad } from 'vue-dev-notepad'
import 'vue-dev-notepad/dist/style.css' // Import styles
</script>

⚙️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultPosition | Object | { x: 100, y: 100 } | Initial position when first loaded | | defaultSize | Object | { width: 300, height: 250 } | Initial size when first loaded | | minWidth | Number | 200 | Minimum width constraint | | minHeight | Number | 150 | Minimum height constraint | | maxWidth | Number | 600 | Maximum width constraint | | maxHeight | Number | 500 | Maximum height constraint | | storagePrefix | String | 'dev-notepad' | localStorage key prefix | | devOnly | Boolean | true | Only show in development environment |

🚀 Production vs Development

By default, the notepad only appears in development and is automatically hidden in production builds. This prevents your notes from showing to end users.

Default Behavior (Recommended)

<template>
  <!-- Only visible during development -->
  <DevNotepad />
</template>

Show in Production (if needed)

<template>
  <!-- Visible in both development and production -->
  <DevNotepad :dev-only="false" />
</template>

Environment Detection

The component uses process.env.NODE_ENV === 'development' to determine when to show the notepad.

🎮 Methods

Access these methods using template refs:

<template>
  <div>
    <DevNotepad ref="notepadRef" />
    <button @click="clearNotes">Clear Notes</button>
    <button @click="toggleNotepad">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DevNotepad } from 'vue-dev-notepad'

const notepadRef = ref(null)

const clearNotes = () => {
  notepadRef.value.clearNote()
}

const toggleNotepad = () => {
  notepadRef.value.toggleNotepad()
}
</script>

Available methods:

• openNotepad() - Show the full notepad
• closeNotepad() - Collapse to button
• toggleNotepad() - Toggle between full/collapsed
• toggleMinimize() - Toggle minimize state (when open)
• clearNote() - Clear the current note content

💡 How it Works

The notepad automatically detects the current route and stores notes separately for each page. Notes are saved to localStorage with a key pattern:

dev-notepad-/your/route/path

This means:

• /home page has its own notes
• /about page has its own notes
• /products/123 page has its own notes

🎨 Styling

The component comes with a clean, minimalistic design out of the box. If you need to customize the appearance, you can override the CSS classes:

/* Custom styling example */
.floating-notepad {
  /* Your custom styles */
}

.notepad-header {
  /* Header customization */
}

.notepad-textarea {
  /* Textarea customization */
}

🛠️ Development

Local Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev
4. Build for production: npm run build

Installation

The package is published on npm and ready to use:

# Install with npm
npm install vue-dev-notepad

# Install with yarn
yarn add vue-dev-notepad

# Install with pnpm
pnpm add vue-dev-notepad

After installation, follow the Usage section above to get started.

📋 Requirements

• Vue 3.0+
• Vue Router (for automatic route detection)

📄 License

MIT License - feel free to use in your projects!

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

If you find any bugs or have feature requests, please create an issue on the GitHub repository.