ue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at the best packages for adding code editors and time pickers.
Vue-Codemirror-Lite
Vue-Codemirror-Lite is a code viewer for Vue apps.
It has syntax highlighti
To use it, we run:
npm i vue-codemirror-lite
to install it.
Then we can use it by writing:
<template>
<codemirror :value="code"></codemirror>
</template>
<script>
import { codemirror } from "vue-codemirror-lite";
export default {
components: {
codemirror
},
data() {
return {
code: 'const str = "hello world"'
};
}
};
</script>
We just use the codemirror component to display the code.
Also, we can assign a ref and call methods on it:
<template>
<codemirror ref="codeEditor" :value="code"></codemirror>
</template>
<script>
import { codemirror } from "vue-codemirror-lite";
export default {
components: {
codemirror
},
data() {
return {
code: 'const str = "hello world"'
};
},
computed: {
editor() {
return this.$refs.codeEditor.editor;
}
},
mounted() {
this.editor.focus();
}
};
</script>
Vue Prism Editor
Vue Prism Editor is another code editor for Vue apps.
To use it, we run:
npm i vue-prism-editor prism
to install it.
Prism is a required dependency.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import "prismjs";
import "prismjs/themes/prism-tomorrow.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<prism-editor class="my-editor" :code="code" language="js"></prism-editor>
</template>
<script>
import PrismEditor from "vue-prism-editor";
export default {
components: {
PrismEditor
},
data() {
return {
code: `const a = 'foo'`
};
}
};
</script>
<style>
.my-editor {
height: 300px;
}
</style>
We use the prism-editor component.
To display it, we set the height of the editor.
The code prop has the code.
language is set to js to indicate that we display JavaScript.
We can display line numbers with the linenumbers prop:
<template>
<prism-editor lineNumbers class="my-editor" :code="code" language="js"></prism-editor>
</template>
<script>
import PrismEditor from "vue-prism-editor";
export default {
components: {
PrismEditor
},
data() {
return {
code: `const a = 'foo'`
};
}
};
</script>
<style>
.my-editor {
height: 300px;
}
</style>
v-jsoneditor
v-jsoneditor is a JSON editor that’s made for Vue apps.
To use it, we run:
npm i v-jsoneditor
to install it.
Then we can use it by writing:
<template>
<div>
<v-jsoneditor v-model="json" :plus="false" height="400px" @error="onError"></v-jsoneditor>
</div>
</template>
<script>
import VJsoneditor from "v-jsoneditor";
export default {
name: "app",
components: {
VJsoneditor
},
data() {
return {
json: {
hello: "world"
}
};
},
methods: {
onError() {
console.log("error");
}
}
};
</script>
We use the v-jsoneditor component to add it.
v-model binds the JSON value to the editor.
The error event is emitted and we can handle it with the onError method.
We can set some options with the options prop.
To use it, we write:
<template>
<div>
<v-jsoneditor v-model="json" :options="options" :plus="false" height="400px" @error="onError"></v-jsoneditor>
</div>
</template>
<script>
import VJsoneditor from "v-jsoneditor";
export default {
name: "app",
components: {
VJsoneditor
},
data() {
return {
json: {
hello: "world"
},
options: {
templates: [
{
text: "Person",
title: "Insert a Person Node",
className: "jsoneditor-type-object",
field: "PersonTemplate",
value: {
firstName: "james",
lastName: "smith"
}
}
]
}
};
},
methods: {
onError() {
console.log("error");
}
}
};
</script>
This allows us to add preset nodes by since we added the templates array with those fields.
plus lets us switch to full screen.
Vue2 Timepicker
Vue2 Timepicker is a handy time picker.
To use it, we run:
npm i vue2-timepicker
to install it.
Then we can write:
<template>
<div>
<vue-timepicker></vue-timepicker>
</div>
</template>
<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
export default {
name: "app",
components: {
VueTimepicker
}
};
</script>
to use the timepicker.
We just add the vue-timerpicker component.
The format can be set and we can bind the selected value to a state:
<template>
<div>
<vue-timepicker v-model="time" format="HH:mm:ss"></vue-timepicker>
<p>{{time}}</p>
</div>
</template>
<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
export default {
name: "app",
components: {
VueTimepicker
},
data() {
return {
time: undefined
};
}
};
</script>
We use v-model for binding and format to set the time format.
Conclusion
Vue-Codemirror-Lite and Vue Prism Editor are code editors for Vue apps.
v-jsoneditor is a JSON editor for Vue apps.
Vue2 Timepicker is a time picker.
