https://github.com/ctf0/overseer
preview your form data before submitting
https://github.com/ctf0/overseer
javascript laravel overseas php preview vuejs
Last synced: about 1 year ago
JSON representation
preview your form data before submitting
- Host: GitHub
- URL: https://github.com/ctf0/overseer
- Owner: ctf0
- License: mit
- Created: 2017-12-07T19:57:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:15:58.000Z (over 3 years ago)
- Last Synced: 2025-05-11T20:46:28.306Z (about 1 year ago)
- Topics: javascript, laravel, overseas, php, preview, vuejs
- Language: Vue
- Homepage:
- Size: 25.4 KB
- Stars: 17
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
OverSeer
A tiny package to help preview any form data before submitting to the db.
> If you are looking to have a control over the saved content as well, you may want to give [Odin](https://github.com/ctf0/Odin) a try too.
## Installation
- `composer require ctf0/over-seer`
- (Laravel < 5.5) add the service provider.
```php
'providers' => [
ctf0\OverSeer\OverSeerServiceProvider::class,
];
```
- publish the package assets with
`php artisan vendor:publish --provider="ctf0\OverSeer\OverSeerServiceProvider"`
- install dependencies
```bash
yarn add vue form-serialize
# or
npm install vue form-serialize --save
```
- add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.
- if you are having issues [Check](https://ctf0.wordpress.com/2017/09/12/laravel-mix-es6/).
```js
window.Vue = require('vue')
require('../vendor/OverSeer/manager')
new Vue({
el: '#app'
})
```
## Usage
- add an id to the form you want to collect its content, ex.
```html
...
```
- then add the vue component anywhere near that form
+ `form-id` is the id you gave to your form, in that case `my-form`
+ `template` is where you want to display the data, ex `views/posts/overseer`
+ `title` optional url title, so instead of just `my.app/overseer` it would be `my.app/overseer/my-awesome-title`
```blade
Preview
```
- now in the view where we will display our data, we can access it like
```blade
// for single values
{{ $data->title }}
// for nested values
{{ $data->body->en }}
```
just like you would usually do with any model.
## Notes for `WYSIWYG Editors`
- we currently support `tinyMCE` but if you are using any other editor, PRs are welcome :trophy:
### Security
If you discover any security-related issues, please email [ctf0-dev@protonmail.com](mailto:ctf0-dev@protonmail.com).