https://github.com/devkabir/vue-wp-media
https://github.com/devkabir/vue-wp-media
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devkabir/vue-wp-media
- Owner: devkabir
- Created: 2025-07-15T07:48:14.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-07-15T17:17:10.000Z (8 months ago)
- Last Synced: 2025-07-16T09:10:14.933Z (8 months ago)
- Language: JavaScript
- Size: 31.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue WP Media
A simple button for WordPress that lets you pick pictures, videos, and files. Works with Vue 3 and is super easy to use!
## What does this do?
If you have a WordPress website and want to add a "Choose File" button that opens WordPress's file picker, this package does exactly that. No coding experience needed!
## Why use this?
### ✅ **Super Easy**
- Just 3 lines of code to get a working file picker
- No complicated setup
- Works right away
### ✅ **Uses WordPress Files**
- Uses the same file picker as WordPress admin
- All your uploaded files are there
- Same look and feel users know
### ✅ **Perfect for**
- Adding file pickers to your WordPress site
- Letting users choose images, videos, or documents
- Making WordPress admin pages with Vue
## What you need
- A WordPress website
- Vue 3 (a JavaScript tool)
- Basic HTML knowledge
## How to install
Type this in your project folder:
```bash
npm install vue-wp-media
```
## How to use
### Method 1: The Easy Way
Step 1: Add to your Vue app
```js
import { createApp } from "vue";
import App from "./App.vue";
import VueWpMedia from "vue-wp-media";
const app = createApp(App);
app.use(VueWpMedia);
app.mount("#app");
```
Step 2: Use in your page
```vue
You picked: {{ myFile.filename }}
import { ref } from "vue";
const myFile = ref({});
```
Done! You now have a working file picker.
### Method 2: Import the piece you need
```vue
import { ref } from "vue";
import { WpMedia } from "vue-wp-media";
const myFile = ref({});
```
## Examples
### Pick one image
```vue
![]()
import { ref } from "vue";
const photo = ref({});
```
### Pick multiple files
```vue
{{ file.filename }}
import { ref } from "vue";
const files = ref([]);
```
### Pick only images
```vue
```
### Pick only videos
```vue
```
### Make the button look nice
```vue
```
## Settings you can change
| Setting | What it does | Default |
|---------|-------------|---------|
| `button-text` | Text on the button | "Select Media" |
| `title` | Title of the popup | "Select Media" |
| `button-label` | Text on "Use" button | "Use this media" |
| `media-type` | What files to show | "all" |
| `multiple` | Pick many files | false |
### File types you can pick
- `image` - Pictures only
- `video` - Videos only
- `audio` - Sound files only
- `application` - Documents (PDF, Word, etc.)
- `text` - Text files
- `all` - Any file type
## What you get when someone picks a file
```js
{
id: 123, // WordPress file number
url: "https://...", // Link to the file
filename: "my-photo.jpg", // File name
alt: "A nice photo", // Alt text for images
title: "My Photo", // File title
mime: "image/jpeg", // File type
type: "image", // General type
}
```
## Setup WordPress
Your WordPress needs this code (ask a developer to add it):
```php
function my_media_scripts() {
wp_enqueue_media(); // This loads WordPress file picker
wp_enqueue_script('vue-wp-media', 'path/to/vue-wp-media.umd.js');
wp_enqueue_style('vue-wp-media', 'path/to/vue-wp-media.css');
}
add_action('admin_enqueue_scripts', 'my_media_scripts');
```
## Use without building
If you don't want to build anything, copy this code:
```html
const { createApp } = Vue;
const { WpMedia } = VueWpMedia;
createApp({
components: { WpMedia },
setup() {
const myFile = Vue.ref({});
return { myFile };
},
}).mount("#app");
```
## Test it
### Build commands
```bash
# Start development
npm run dev
# Build for your website
npm run build
# Preview your build
npm run preview
```
### Test with WordPress
1. Put this folder in `wp-content/plugins/vue-wp-media/`
2. Turn on the plugin in WordPress admin
3. Go to "Vue Media Test" page to try it
## Before and after
**Before (hard way):**
```js
// Lots of complicated code (100+ lines)
let mediaFrame = wp.media({
title: 'Select Media',
state: 'library',
library: { type: 'image' },
multiple: false
});
mediaFrame.on('select', function() {
// More complicated code...
});
// Even more code...
```
**After (easy way):**
```vue
import { ref } from "vue"
import { WpMedia } from "vue-wp-media"
const selectedImage = ref({})
```
Much easier! 🎉
## What browsers work
- Chrome, Firefox, Safari, Edge
- WordPress 5.0 or newer
- Vue 3.0 or newer
## License
MIT License - free to use for any project!
---
**Made simple for everyone to use!**