https://github.com/fireyy/vue-page-designer

A drag-and-drop mobile website builder base on Vue.
https://github.com/fireyy/vue-page-designer

builder designer page vue widget

Last synced: 2 days ago
JSON representation

A drag-and-drop mobile website builder base on Vue.

• Host: GitHub
• URL: https://github.com/fireyy/vue-page-designer
• Owner: fireyy
• Created: 2017-12-12T08:13:28.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:13:41.000Z (almost 2 years ago)
• Last Synced: 2024-11-05T16:04:04.627Z (5 days ago)
• Topics: builder, designer, page, vue, widget
• Language: Vue
• Homepage: https://fireyy.github.io/vue-page-designer/
• Size: 2.78 MB
• Stars: 891
• Watchers: 37
• Forks: 229
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vue-page-designer



  

    

    


    Live Demo

  



A drag-and-drop mobile website builder base on Vue.

## Install

```bash

yarn add vue-page-designer

```

You can start it quickly, in main.js:

```js

import Vue from 'vue';

import vuePageDesigner from 'vue-page-designer'

import 'vue-page-designer/dist/vue-page-designer.css'

import App from './App.vue';

Vue.use(vuePageDesigner);

new Vue({

  el: '#app',

  render: h => h(App)

});

```

Next, use it:

```html

  


    

  


#app {

  height: 100%;

}

```

A [example](https://fireyy.github.io/vue-page-designer/) ▶️, and [source](./example/). Also a [custom widget source](./example/widgets)

# Options

You can add custom components, save callback.

| Props | Type | Description |

| -------- | -------- | -------- |

| value | `Object` | Editor initial value, you can pass the value of the save callback and resume the draft |

| locale | `String` | Editor default locale. Now support 'cn' and 'en', default 'cn'. |

| widgets | `Object` | Vue Components. Custom components for editor. see [Example](https://github.com/fireyy/vue-page-designer-widgets/blob/master/src/index.js) |

| save | `(data) => void` | When you click the Save button, feed back to you to save the data |

| upload | `(files) => Promise` | Editor upload function, allowing you to implement your own upload-file's request |

## Parameter: `value`

The `value` came from `save`.

```html

  


    

  


```

## Parameter: `widgets`

You can install default widget in `vue-page-designer-widgets`

```bash

yarn add vue-page-designer-widgets

```

Import and use it

```html

  


    

  


import widgets from './widgets'

export default {

  data () {

    return {

      widgets

    }

  }

}

```

Set locale to EN

```html

  


    

  


```

## Parameter: `save`

```html

  


     { console.log('send the value data to your server', data) }" />

  


```

## Parameter: `upload`

```html

  


    

  


export default {

  methods: {

    upload (files) {

      return yourApiUpload(files).then(res => {

        return res.data

      }).catch(err => {

        console.log(err)

      })

    }

  }

}

```