A json Viewer and Editor for Vue


A json viewer and editor for vue



  • Nested Node can be collapsed/expanded
  • Object keys can be sorted
  • Json Editor
  • Display Object and array size
  • Theme support and totally customizable
  • Copy to clipboard


Install the component with npm:

npm install json-vuer --save

with yarn:

yarn add json-vuer

then, in your application javascript, add:

import JsonVuer from "json-vuer"

and then add the component into your html where you want

        <json-vuer :value="json" 


Name Type Default Description
value JSON null Can be any valid json, like object, array, string, etc
v-model JSON
name string false null
indentWidth integer 4 Indent width for nested objects, like object and array
showObjectSize boolean true set to false to hide object and array size
objectSizeName string items name of the object size
showArrayIndex boolean true set to false to hide array index
showDataTypes boolean true set to false to hide data types
showComma boolean true set to false to hide commas
theme string default Packaged themes: “default”, “night”, “iron-man”, “greenscreen” and you can customize the appearance as you like, see Themes .
iconStyle string circle style of expand/collapse icons. Accepted values are “circle”, triangle", “square”, “chevron”.
copyable boolean true set to true to display a copy button on every json node
addable boolean false set to true to display a add button on every nested node
editable boolean false set to true to display a edit button on every base type node
removable boolean false set to true to dispaly a delete button on every node
sort boolean false set to true to sort object keys


There are two steps to customize a theme

  1. customize the SCSS below
  2. add theme="my-theme" to JsonVuer component
.json-vuer.my-theme { // name of your theme
    background-color: #fff;

    .json-name { // customize json key/name 
        color: #000;
        &.array-index { color: #0000FF; }

    .json-value {
        &__object {
            margin-left: 4px;
            .fold-line { border-left: 1px dotted #aaa; }

        &__string { color: #FF0000; }
        &__boolean { color: #0000FF; }

        &__float { color: rgb(47, 100, 71);}

        &__nan {
            box-sizing: border-box;
            padding: 0 4px;
            border-radius: 4px;
            color: #0000FF;
            background-color: #0000;
            font-size: 11px;

    .json-braces {
        &__start {}
        &__end {}
        &__object {}
        &__array {}

    .json-quotes { color: #000; }

    .json-colon {
        margin: 0 4px;
        color: #000;
        font-weight: bold;

    .json-data-type-label {
        color: #aaa;
        margin-right: 8px;

    .json-toggle {
        padding: 0 8px 0 0;
        color: #000;
        font-size: 13px;

        &__collapsed {}
	      &__expanded {}

    .json-ellipsis {
        color: #000;
        font-weight: bold;
        padding: 0 5px;

    .json-object-size {
        color: #aaa;
        font-size: 12px;
        margin-left: 8px;

    .json-node-toolbar {
        margin-left: 4px;
        color: #000;
        font-size: 14px;

Download Details:

Author: liudding

Source Code: https://github.com/liudding/json-vuer

#vue #vuejs #javascript

What is GEEK

Buddha Community

A json Viewer and Editor for Vue
Archie Mistry

Archie Mistry


Collection of 15 Vue Editor Component for Your Vue App

Vue editor component can become an unparalleled ally when it comes to code completion and visual assistance for debugging and building a Vue app.

1. Vue2Editor

HTML Editor using Vue.js and Quilljs.




2. Vuep (vue playground)

A component for rendering Vue components with live editor and preview.

Vuep (vue playground



3. Vue-Trumbowyg

Vue.js v2.x component for Trumbowyg WYSIWYG editor


  • Reactive v-model value
  • You can change editor value programmatically
  • Play nice with vee-validate validation library




4. vue2-medium-editor

A medium-editor component for Vue2. For Vue1 checkout branch 1.0.




5. typeflow-editor

build with the vue and mxGraph.




6. tiptap-vuetify

WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify.


  • used vuetify components
  • support for different types of icons (fa, md, mdi)
  • internationalization (en, fr, pl, es, ru, uk, ptbr), with automatic detection of the current language through the Vuetify
  • easy to start using
  • props and events are available
  • TypeScript support
  • the project is ready to actively develop if there is support (stars)!
  • the ability to create and use your own extensions
  • choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
  • Vuetify 2.x and 1.x support




7. Kirby Editor β

Kirby Editor is a new type of WYSIWYG editor for Kirby. It’s a mixture between a regular WYSIWYG and a block editor to bring together the best parts of both worlds in a user-friendly interface.

Kirby Editor β


8. Vue Trix Rich Text Editor

A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

Vue Trix Rich Text Editor


9. vue-mathlive

The MathLive Vue wrapper provides a Vue component that implements a <mathfield> HTML tag.

The component can be used to edit formulas using the MathLive library. The editor provides a rich, accessible, editing UI, including virtual keyboards for mobile, and can provide the output as LaTeX, MathML or spoken text.



10. yimo-vue-editor

Vue-editor component modified and encapsulated based on wangeditor2.5.11 source code.




11. vue-katex

KaTeX enables fast math typesetting for the web. This plugin introduces a simple directive to use KaTeX in your Vue app. Enjoy!




12. toast-ui.vue-editor

This is Vue component wrapping TOAST UI Editor.




13. ckeditor5-vue

CKEditor 5 rich text editor component for Vue.js.




14. tiptap

A renderless and extendable rich-text editor for Vue.js




15. json-editor

Edit JSON in UI form with JSON Schema and Vue.js json-editor component.




Thank for read!

#vue-editor #editor-component #vue-js #editor-vue

Luna  Mosciski

Luna Mosciski


8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Brandon  Adams

Brandon Adams


What is JSON? | JSON Objects and JSON Arrays | Working with JSONs Tutorial

In this video, we work with JSONs, which are a common data format for most web services (i.e. APIs). Thank you for watching and happy coding!

Need some new tech gadgets or a new charger? Buy from my Amazon Storefront https://www.amazon.com/shop/blondiebytes

What is an API?

JSON Google Extension

Endpoint Example

Check out my courses on LinkedIn Learning!
REFERRAL CODE: https://linkedin-learning.pxf.io/blondiebytes

Support me on Patreon!

Check out my Python Basics course on Highbrow!

Check out behind-the-scenes and more tech tips on my Instagram!

Free HACKATHON MODE playlist:

Stitch Fix Invite Code: https://www.stitchfix.com/referral/10013108?sod=w&som=c
FabFitFun Invite Code: http://xo.fff.me/h9-GH
Uber Invite Code: kathrynh1277ue
Postmates Invite Code: 7373F
SoulCycle Invite Code: https://www.soul-cycle.com/r/WY3DlxF0/
Rent The Runway: https://rtr.app.link/e/rfHlXRUZuO

Want to BINGE?? Check out these playlists…

Quick Code Tutorials: https://www.youtube.com/watch?v=4K4QhIAfGKY&index=1&list=PLcLMSci1ZoPu9ryGJvDDuunVMjwKhDpkB

Command Line: https://www.youtube.com/watch?v=Jm8-UFf8IMg&index=1&list=PLcLMSci1ZoPvbvAIn_tuSzMgF1c7VVJ6e

30 Days of Code: https://www.youtube.com/watch?v=K5WxmFfIWbo&index=2&list=PLcLMSci1ZoPs6jV0O3LBJwChjRon3lE1F

Intermediate Web Dev Tutorials: https://www.youtube.com/watch?v=LFa9fnQGb3g&index=1&list=PLcLMSci1ZoPubx8doMzttR2ROIl4uzQbK

GitHub | https://github.com/blondiebytes

Twitter | https://twitter.com/blondiebytes

LinkedIn | https://www.linkedin.com/in/blondiebytes

#jsons #json arrays #json objects #what is json #jsons tutorial #blondiebytes

Alex Lambert

Alex Lambert


vue-quill-editor Rich Text Editor Experience

There are many rich text editors on the market. I personally still recommend Vue’s own vue-quill-deitor. Although it only supports IE10 +, I will provide you with the experience of using this text editor.

So let’s go straight to the point and use quill in vue. We need npm to install it. The installation command is as follows:

npm install vue-quill-editor

Reinstall dependencies

npm install quill


Introduced in main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill / dist / quill.core.css'
import 'quill / dist / quill.snow.css'
import 'quill / dist / quill.bubble.css'
Vue.use (VueQuillEditor)

The following css must be referenced, otherwise the editor will not have css.

The code in the vue page is as follows:

  <div class = "edit_container">
            v-model = "content" 
            ref = "myQuillEditor" 
            : options = "editorOption" 
            @ blur = "onEditorBlur ($ event)" @ focus = "onEditorFocus ($ event)"
            @ change = "onEditorChange ($ event)">
        </ quill-editor>
        <button v-on: click = "saveHtml"> Save </ button>
    </ div>  
</ template>

export default {
  name: 'App',
  data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {}
  }, computed: {
        editor () {
            return this. $ refs.myQuillEditor.quill;
    }, methods: {
        onEditorReady (editor) {// Prepare the editor
        onEditorBlur () {}, // lost focus event
        onEditorFocus () {}, // get focus event
        onEditorChange () {}, // content change event
        saveHtml: function (event) {
          alert (this.content);
</ script>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: # 2c3e50;
  margin-top: 60px;
</ style>

The v-model is our own html code, you can put this html directly into the database, so there is no problem. If you want to disable the editor, you can pass the following code:

onEditorFocus (val, editor) {// event when rich text gets focus
      console.log (val); // content when rich text gets focus
      editor.enable (false); // Disable when getting focus

Theme settings

In the vue project, Quill’s files are specifically introduced, whichever theme is used is written. The default is snow theme.

data () {
     return {
            content: `<p> hello world </ p>`,
            editorOption: {
              theme: 'snow'

Toolbar settings

modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],   
               // Bold, italic, underline, strikethrough
              ['blockquote', 'code-block'],     
              // Reference, code block
              [{'header': 1}, {'header': 2}],       
               // Title, the form of key-value pairs; 1, 2 represents the font size
              [{'list': 'ordered'}, {'list': 'bullet'}],    
               // list
              [{'script': 'sub'}, {'script': 'super'}],   
              // superscript and subscript
              [{'indent': '-1'}, {'indent': '+1'}],    
               // indent
              [{'direction': 'rtl'}],             
              // text direction
              [{'size': ['small', false, 'large', 'huge']}],
               // font size
              [{'header': [1, 2, 3, 4, 5, 6, false]}],    
               // Several levels of title
              [{'color': []}, {'background': []}],     
              // font color, font background color
              [{'font': []}],     
              // font
              [{'align': []}],   
               // alignment
               // Clear font style
              ['image', 'video']   
               // Upload pictures, upload videos
          theme: 'snow'

Picture push upload

You need to install the quill-image-drop-module module, then change the imageDrop setting to true, and you can take pictures on your computer online.

import {quillEditor} from 'vue-quill-editor'
import * as Quill from 'quill'
import {ImageDrop} from 'quill-image-drop-module';
Quill.register ('modules / imageDrop', ImageDrop);
export default {
  name: 'App',
  data () { 
     return {
        editorOption: {
          modules: {
            imageDrop: true, 
          theme: 'snow'

Then you do n’t need to think about uploading the file. You may want to put the picture first. In fact, the file is already a base64. When you read it at the front desk, you can directly decode it ~


return {
        editorOption: {
          modules: {
        imageResize: ()
          theme: 'snow'

#vue-js #vue-editor #vue

Earlene  Rowe

Earlene Rowe


Visual JSON editor built as an vue component.

Visual JSON Editor built as an vue component. Provides a basic GUI.
Click to view now.

#json #vue #vue-js