A json Viewer and Editor for Vue

json-vuer

A json viewer and editor for vue

• json-vuer
  • Features
  • Installation
  • Props
  • Themes

Features

• 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

Installation

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"
Vue.use(JsonVuer)

and then add the component into your html where you want

<template>
    <div>
        <json-vuer :value="json" 
                   :indentWidth="4" 
                   :showObjectSize="true" 
                   :showDataTypes="true" 
                   :copyable="true"/>
    </div>
</template>

Props

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

Themes

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; }

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

        &__null,
        &__undefined,
        &__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-comma,
    .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

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.

Demo

Download

---

2. Vuep (vue playground)

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

Demo

Download

---

3. Vue-Trumbowyg

Vue.js v2.x component for Trumbowyg WYSIWYG editor

Features

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

Demo

Download

---

4. vue2-medium-editor

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

Demo

Download

---

5. typeflow-editor

build with the vue and mxGraph.

Demo

Download

---

6. tiptap-vuetify

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

Features

• 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

Demo

Download

---

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.

Download

---

8. Vue Trix Rich Text Editor

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

Download

---

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.

Download

---

10. yimo-vue-editor

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

Demo

Download

---

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!

Demo

Download

---

12. toast-ui.vue-editor

This is Vue component wrapping TOAST UI Editor.

Demo

Download

---

13. ckeditor5-vue

CKEditor 5 rich text editor component for Vue.js.

Demo

Download

---

14. tiptap

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

Demo

Download

---

15. json-editor

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

Demo

Download

---

Thank for read!

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

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

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?
https://youtu.be/T74OdSCBJfw

JSON Google Extension
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en

Endpoint Example
http://maps.googleapis.com/maps/api/geocode/json?address=13+East+60th+Street+New+York,+NY

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

Support me on Patreon!
https://www.patreon.com/blondiebytes

Check out my Python Basics course on Highbrow!
https://gohighbrow.com/portfolio/python-basics/

Check out behind-the-scenes and more tech tips on my Instagram!
https://instagram.com/blondiebytes/

Free HACKATHON MODE playlist:
https://open.spotify.com/user/12124758083/playlist/6cuse5033woPHT2wf9NdDa?si=VFe9mYuGSP6SUoj8JBYuwg

MY FAVORITE THINGS:
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

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

use:

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:

<template>
  <div class = "edit_container">
        <quill-editor 
            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>

<script>
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>

<style>
#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
  
  
              ['clean'],   
               // 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 ~

ImageResize

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

#vue-js #vue-editor #vue

Visual JSON editor built as an vue component.

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

#json #vue #vue-js