vue-dev-notepad

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

• Clone the repository
• Install dependencies: npm install
• Start development server: npm run dev
• 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.