4 ms·

Awesome. I've literally been tasked with building something exactly like this, and it's a pain in the ass nothing exists like this for Vue so I have to do it fr

• chrisvxd 3y ago
  It's such a common problem, I'm amazed there aren't more solutions out there. A sound data model really helps things out. I'd go API-first. Drag and drop is a PITA. Specifically multi-column layouts, which require nested dropzones and a bunch of "intuitive" UX. A good library can help here, but not do everything (we're using react-beautiful-dnd which is a bit out of date - dnd-kit might have been a better shout). This hasn't landed in our main branch yet, but you can see it under the nested-dropzones branch (https://github.com/measuredco/puck/tree/nested-dropzones https://github.com/measuredco/puck/tree/nested-dropzones). If you could write React wrappers for your Vue components, you could potentially leverage Puck directly. That would save a lot of time. And even if not, you might be able to fork it or reuse the data model. Happy to give you more pointers. If you want to DM, I'm @chrisvxd on Twitter/GitHub and here's my LinkedIn: https://linkedin.com/in/chrisvilla/ https://linkedin.com/in/chrisvilla/
  • agotterer 3y ago
    If you're open to hosted service, is the best commercial visual + headless CMS I've come across that supports React - https://www.storyblok.com/home https://www.storyblok.com/home.
    • Exuma 3y ago
      Does it allow embedding in an actual app? Thats the problem I have with these is they all require some weird form of going to their domain. I need the editor (AND the rendered page) to be 100% on my own domain. I wish they had some editor as an open source library and id just pay to have an API key or something
      • deleted 3y ago
        [deleted]
  • jcuenod 3y ago
    I just published a dnd library for nested tree structures (https://www.npmjs.com/package/vue-tree-dnd https://www.npmjs.com/package/vue-tree-dnd), and I can't believe how much of a PITA dnd is! Working on browser-compatibility took me back to pre-jquery days...
    • Exuma 3y ago
      Interesting.. do you think it's a good use case for a drag an drop editor compared to other DND out there?
      • jcuenod 3y ago
        It's not for editing UIs like the OP's post. This is for editing nested lists. So it's probably not what you're looking for. But I made it because when I looked for a vue library that could do what I needed, I didn't find one that I wanted to use/thought would work.
        • Exuma 3y ago
          I'm assuming you researched a lot of other DND libraries when building. Did any stand out to you that were better than the rest? IE supporting nested structures, and looked to be programmed well. In my research I found about 8-10 of them and just thought... ugh, I will do this later, to decide between them
          • jcuenod 3y ago
            Well, there are obvious leading contenders like `https://sortablejs.github.io/Sortable/ https://sortablejs.github.io/Sortable/` and, within the `vue` space, `https://sortablejs.github.io/vue.draggable.next/ https://sortablejs.github.io/vue.draggable.next/`. Most of the stuff I looked at was unmaintained (lots not updated for vue3). I really disliked the vuedraggable was handling nesting, and it's just a wrapper around a sortable. At the end of the day, my problem was simple enough that I didn't want a 500kb dependency. If you're wanting to do something like the OP but with nesting, I'd definitely start by looking at Sortable, though (maybe wrapping it the way you want).
  • satvikpendem 3y ago
    Are there more details on the data model? I'm actually building something like this but not for React, so it might be useful to reuse the data model as you say.
    • chrisvxd 3y ago
      The data model is detailed here in the docs: https://github.com/measuredco/puck#data https://github.com/measuredco/puck#data There's not an awful lot to it.
• mattront 3y ago
  Take a look at the Vue Designer [0] (it is our app), an editor that let's you visually build Vue projects, not just using existing components. You can even build components with the editor. [0] https://vuedesigner.com https://vuedesigner.com
• wbarber 3y ago
  Plasmic.app works with vue - why not just use that?
  • Exuma 3y ago
    This was what I said previously, which I'm assuming plasmic doesnt do: > Does it allow embedding in an actual app? Thats the problem I have with these is they all require some weird form of going to their domain. I need the editor (AND the rendered page) to be 100% on my own domain. I wish they had some editor as an open source library and id just pay to have an API key or something
• showerst 3y ago
  Take a look at grapesjs -- it's a bit janky in places but it's self hosted and overall works pretty well. It can output plain HTML so I think it could be integrated with vue.
  • Exuma 3y ago
    The problem with that one is I want to completely avoid parsing/rendering HTML. That creates huge headaches when you want to create some kind of "component" but then once the html is rendered, it cant be re-parsed into its original state without adding a bunch of junk to it, like helper classes etc. It's just very brittle for what I want to do