Vue.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 how the best packages for adding code editors, notifications, and watching element resizing.
vue-codemirror
vue-codemirror provides us with a box to display code.
To use it, we install it by running:
npm i vue-codemirror
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueCodemirror from "vue-codemirror";
import "codemirror/lib/codemirror.css";
Vue.use(VueCodemirror);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<codemirror v-model="code" :options="cmOptions"></codemirror>
</div>
</template>
<script>
import "codemirror/mode/javascript/javascript.js";
import "codemirror/theme/base16-dark.css";
export default {
data() {
return {
code: "const a = 1",
cmOptions: {
tabSize: 4,
mode: "text/javascript",
theme: "base16-dark",
lineNumbers: true,
line: true
}
};
},
methods: {
onCmReady(cm) {
console.log("the editor is readied!", cm);
},
onCmFocus(cm) {
console.log("the editor is focus!", cm);
},
onCmCodeChange(newCode) {
console.log("this is new code", newCode);
this.code = newCode;
}
}
};
</script>
We have the codemirror component.
The code is bound with v-model to code .
We can also add some options like tabSize for size of tabs.
mode for the language we’re displaying.
theme for the display theme.
lineNumber to indicate whether we show line numbers.
It also comes with a merge mode, which lets us compare code side by side.
To use that, we can write:
<template>
<div>
<codemirror merge :options="cmOption" @scroll="onCmScroll"></codemirror>
</div>
</template>
<script>
import "codemirror/addon/merge/merge.js";
import "codemirror/addon/merge/merge.css";
import DiffMatchPatch from "diff-match-patch";
window.diff_match_patch = DiffMatchPatch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;
export default {
data() {
return {
cmOption: {
value: "<p>james</p>",
origLeft: null,
orig: "<p>james smith</p>",
connect: "align",
mode: "text/html",
lineNumbers: true,
collapseIdentical: false,
highlightDifferences: true
}
};
},
methods: {
onCmScroll() {
console.log("onCmScroll");
}
}
};
</script>
value has the new code.
orig has the original code.
collapseIdentical lets us collapse identical code by default.
highlightDifference lets us highlight any code differences between the original and the current code.
vue-notification
vue-notification is a library that lets us display notifications.
To install it, we run:
npm i vue-notification
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Notifications from "vue-notification";
Vue.use(Notifications);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<notifications group="foo"/>
</div>
</template>
<script>
export default {
mounted() {
this.$notify({
group: "foo",
title: "title",
text: "Hello"
});
}
};
</script>
We add the notification component with the group prop.
Then we use the same group value when we call this.$notify to display notifications.
title is the title and text is the content.
We can style it with the generated classes.
We can also create custom notification by populating the slots that it comes with:
<template>
<div>
<notifications group="foo" position="top left">
<template slot="body" slot-scope="props">
<div>
<a class="title">{{props.item.title}}</a>
<a class="close" @click="props.close">close</a>
<div v-html="props.item.text"></div>
</div>
</template>
</notifications>
</div>
</template>
<script>
export default {
mounted() {
this.$notify({
group: "foo",
title: "title",
text: "Hello"
});
}
};
</script>
We populated the body slot with our own content.
It comes with a props.close to close the notification.
The width and velocity can be changed.
vue-resize
vue-resize lets us watch for elements being resized.
To install it, we run:
npm i vue-resize
Then we can use it by using:
main.js
import Vue from "vue";
import App from "./App.vue";
import { ResizeObserver } from "vue-resize";
Vue.component("resize-observer", ResizeObserver);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<resize-observer @notify="handleResize"/>
</div>
</template>
<script>
export default {
methods: {
handleResize({ width, height }) {
console.log(width, height);
}
}
};
</script>
<style scoped>
div {
position: relative;
width: 100vw;
}
</style>
We listen to elements being resized with the resize-observer component.
Conclusion
vue-codemirror lets us add a code editor that supports diffing.
vue-notification lets us add notifications of any variety.
vue-resize lets us watch for elements being resized.
