vue-page-designer-vue3 v1.0.3

vue-page-designer-vue3 and vue2

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

Install yarn

yarn add vue-page-designer-vue3

Or Install npm

npm i vue-page-designer-vue3

You can start it quickly, in main.js:

import Vue from 'vue';
import vuePageDesigner from 'vue-page-designer-vue3'
import 'vue-page-designer-vue3/dist/vue-page-designer-vue3.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-vue3 />
  </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-vue3 :value="value" />
  </div>
</template>

Parameter: widgets

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

yarn add vue-page-designer-widgets-vue3

or

npm i vue-page-designer-widgets-vue3

Import and use it

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

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

Set locale to RU

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

Parameter: save

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

Parameter: upload

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