vue-page-designer

Live Demo

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

Install

yarn add vue-page-designer

You can start it quickly, in main.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:

<template>
  <div id="app">
    <vue-page-designer />
  </div>
</template>

<style>
#app {
  height: 100%;
}
</style>

A example ▶️, and source. Also a custom widget source

Options

You can add custom components, save callback.

Parameter: value

The value came from save.

<template>
  <div id="app">
    <vue-page-designer :value="value" />
  </div>
</template>

Parameter: widgets

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

yarn add vue-page-designer-widgets

Import and use it

<template>
  <div id="app">
    <vue-page-designer :widgets="widgets" />
  </div>
</template>
<script>
import widgets from './widgets'

export default {
  data () {
    return {
      widgets
    }
  }
}
</script>

Set locale to EN

<template>
  <div id="app">
    <vue-page-designer locale="en" />
  </div>
</template>

Parameter: save

<template>
  <div id="app">
    <vue-page-designer @save="(data) => { console.log('send the value data to your server', data) }" />
  </div>
</template>

Parameter: upload

<template>
  <div id="app">
    <vue-page-designer :upload="upload" />
  </div>
</template>
<script>
export default {
  methods: {
    upload (files) {
      return yourApiUpload(files).then(res => {
        return res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>