Logo by chimzycash
WIP: Vuse active development is now halted.
Advanced page/email builder based on Vue.js.
- Logo by chimzycash.
MIT
๐ง Build web pages with Vuse, the next-gen interactive page builder powered with Vue.js.
Home Page: https://baianat.github.io/vuse
License: MIT License
Logo by chimzycash
WIP: Vuse active development is now halted.
Advanced page/email builder based on Vue.js.
MIT
I followed the documentation to set this up, (fantastic project by the way), but I am unable to find the uploader component when using the API.
I imported all of my custom section components and added them to the builder like so:
import Builder from 'vuse';
import SomeSection from './components/SomeSection';
Builder.component(SomeSection);
Vue.use(Builder);
And that seems to work fine except for the uploader. Since I have an uploader element defined in my section template (as you do in the documentation page) I get this error on the front end in my console:
[Vue warn]: Unknown custom element: uploader - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any ideas why the uploader component is not automatically imported into the project when I import the Builder? Or are there additional steps I need to take that are not outlined in the setup for the documentation? Thanks!
Love this project, have the Demo running locally, but cannot get the onSave
method to work.
Getting these errors.
[Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render.
---> <App> at demo/App.vue
[Vue warn]: Invalid handler for event "saved": got undefined
---> <VuseBuilder> at src/components/VuseBuilder.vue
<App> at demo/App.vue
Running on my local windows machine...
When I export the styles are lost, trying to look at the app.css shows...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /dist/css/app.css</pre>
</body>
</html>
Hello, I found you section builder and it has really cool features. I followed instructions as mentioned in the installation part on the document but I could not get it work in my vue application.
App.vue
<template>
<div id="app">
<b-builder />
</div>
</template>
main.js
import Vue from 'vue'
import Builder from 'vuse';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Builder, {});
new Vue({
render: h => h(App),
}).$mount('#app')
Error
Unknown custom element: <b-builder> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App>
<Root>```
Hi Vuse team,
I really like your project but I think the docs are not that clear.
Your example project looks great. Is it possible to publish this code?
This would be helpful to understand how to set up the project properly.
I am currently facing a problem while setting up Vuse in a Nuxt project:
// plugins/vuse.js
import Vue from 'vue'
import Builder from 'vuse'
Vue.use(Builder)
export default ({ app }) => {
app.builder = new Builder({
isEditing: true,
})
}
Error: [Vue warn]: Unknown custom element: <b-builder> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Is the ability to drag and drop components to building blocks planned to be implemented?
You can check an example here: https://unlayer.com/demo/
Hi,
After installing vuse with npm install vuse
or yarn add vuse
, it won't resolve 'vuse'. It seems the content of the node_modules/vuse/ is different than this git.
I did everything as stated in the installation page, but can't seem to correct this problem.
ERROR in ./resources/assets/js/app.js Module not found: Error: Can't resolve 'vuse'
My app.js
import Builder from 'vuse'
Vue.use(Builder);
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})
In CDN version it's throw error
Uncaught ReferenceError: Builder is not defined
!!!!!! ????
The demo version contains only a single font. We can allow changing fonts supported by the browser along with the color picker.
Hi...
Just saw your fantastic project and for me, the idea of the project is really amazing... I am a logo/Icon designer and I want to help give my Free contribution to your project by creating a Logo/Icon for your project, as part of my love and passion to always help contribute to great Open Source projects...
Currently working on an idea concept, and I will share it here once I complete it, for you to give me your feedback or suggestion on any changes you might want to satisfy your needs.
Your response would be greatly appreciated...
Regards!
Hello.
This is technically not an issue with the project but I was hoping you could provide some insight. I am trying to make Vuse use the initial set of themes from a json object I get through an axios call.
In app.js, I need to move the current lines:
// install the builder
Vue.use(Builder, {
themes: [
{
name: 'Page1',
sections: [hero2, section2, social3, social4, newsletter]
}, {
name: 'Page2',
tiles: [hero1, section1, social1, social3, newsletter]
}]
});
into a method where I will have a json string retrieved from a web service call (in the future). But simply moving this portion of code into a created() method within the app.js Vue declaration causes the builder not to render properly.
I have gone through and verified the builder is still installed with the same options as before and there doesn't appear to be anything wrong data wise. Would I need to go through an force the builder to rerender somehow? Any advice you could give would be greatly appreciated. Thanks!
in some case, page will need to fetch the data(like ranking data) and then render it. Is vuse support ajax?
Hi, first i want to thank you for this greet work, i'm using your project in a new project where users can build their own store, the problem i'm facing is when changing pages and return to the store builder page the builder begane to be too slow, any idea on how to fix performance slow ??
On export the preview and the project zip folder do not include the CSS code. Causing the exported output to lack any styling.
Observed in the demo project.
I really like you work, really great job, have look on this page editor its jquery based and have really nice features, it is keeping container and components on right panel drag and drop. have look on it can give you good idea. all container and components are plugin you can create own and add to it, but way of adding little complex.
Hi I just tried looking at the demo linked in the docs and the menu bar is hidden on Chrome 71, Mac OS X. https://baianat.github.io/vuse/example.html Thanks!
Hi there,
Thanks for an awesome project, I think this project is great and powerful. Can I know, is this project still maintained?
Thank you
Hey, I'm trying to use this in a Nuxtjs application, and when I try to import this via the nuxtjs /plugins/ method I get the following error when importing a component.
ERROR Failed to compile with 1 errors
This relative module was not found:
* ./section.vue?vue&type=template&id=4d203d86&lang=pug& in ./builder/sections/section.vue
Can anyone help?
Hello again! I just had a quick question.
I noticed there is the ability to drag and drop sections from the sidebar into the main page on the example site but when I use the build thats installed via npm (listed as version 0.0.0 by the way), there is no ability for that which I can see.
Thanks in advance!
Hello,
I am trying to add your dependency.
Adding with npm or yarn is adding a folder in node_modules with no source.
adding the unpkg script is displaying the following
Cannot find "/dist/builder.min.js" in [email protected]
https://unpkg.com/[email protected]/dist/builder.min.js
Just want to know the roadmap and timeline, can't wait to see the one with more funcationality and features.
Good Job!
Hello there and thanks for this awesome project.
is there any road map on adding drag and drop to the canvas elements?
i would be glad to here from you and make a contribution.
thanks in advance.
Hi,
I get this error now after installing Vuse; Cannot set property 'isEditing' of undefined
.
var Vuse = function Vuse (options) {
this.isEditing = true;
this.isSorting = false;
this.isRendered = false;
this.title = options.title;
this.intro = options.intro;
this.sections = options.sections;
this.columnsPrefix = options.columnsPrefix;
this.themes = options.themes;
this.components = {};
this.assets = {
css: options.css || 'dist/css/app.css'
};
this.installPlugins();
};
I installed Vuse only in the component I need it in. Below my App.vue
<template>
<div>
<b-builder @saved="onSave"></b-builder>
</div>
</template>
<script>
import builder from 'vuse';
export default {
components: {
widget,
'b-builder': builder,
},
methods: {
onSave( vuse ) {
console.log('on Save');
},
}
}
</script>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.