Top Vue Packages for Adding Code Editors, Notifications, and Watch Element Resizing
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:20:44

---
title: Top Vue Packages for Adding Code Editors, Notifications, and Watch Element Resizing
published: true
date: 2020-07-26 23:46:43 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-code-editors-notifications-and-watch-element-resizing/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-code-editors-notifications-and-watch-element-resizing
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

The post [Top Vue Packages for Adding Code Editors, Notifications, and Watch Element Resizing](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-code-editors-notifications-and-watch-element-resizing/) appeared first on [The Web Dev](https://thewebdev.info).