https://github.com/jayeshlab/vue3-page-note

A single page note taking application with rich text box with resize, rotate and move feature to take notes build with Vue3, pinia, typescript
https://github.com/jayeshlab/vue3-page-note

Last synced: 7 months ago
JSON representation

A single page note taking application with rich text box with resize, rotate and move feature to take notes build with Vue3, pinia, typescript

• Host: GitHub
• URL: https://github.com/jayeshlab/vue3-page-note
• Owner: JayeshLab
• License: mit
• Created: 2025-02-16T15:19:13.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-03-07T15:46:16.000Z (10 months ago)
• Last Synced: 2025-03-07T16:34:35.862Z (10 months ago)
• Language: TypeScript
• Homepage: https://vue3-page-note.vercel.app
• Size: 78.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue 3 Page Note

A single page note taking application with rich text box with resize, rotate and move feature to take notes. User can copy and paste their notes on page and edit/format the notes on the page and save it locally in browser's IndexedDB.

![vue3-page-note](https://user-images.githubusercontent.com/36194663/206169878-19c08003-f233-4bc6-b5a4-a2eca6092ee7.PNG)

Features:

1. Create Pages

2. Add Text

3. Add Image

4. Google Fonts(Choose own Google font)

5. Emoji Picker

6. Text Foreground & Background color

7. Create Pages

8. Save locally in browser IndexedDB

9. Text Format

10. Text Align

11. Resize, Rotate and Move both Text and Image

12. Auto save on changes

13. Undo and Redo changes

More Feature Coming...

1. Saving to Google Drive or sync to cloud indexeddb

2. Bring Forward and Send Backward Text and Images

3. Add embedded videos links

4. Add tables

   and more....

Build with Vue.js 3, Pinia, Typescript, GoogleFonts, localforage

Demo: [https://vue3-page-note.vercel.app/](https://vue3-page-note.vercel.app/)

## Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run dev

```

### Compiles and minifies for production

```

npm run build

```

### Lints and fixes files

```

npm run lint

```