Categories
Top Vue Packages

Top Vue Packages for Adding Code Editors and Time Pickers

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.