Sign in
Log inSign up

How to Set Up A Vue Development Environment

Juan Carlos Duran Solorzano's photo
Juan Carlos Duran Solorzano
·Mar 20, 2021·

7 min read

Vue is among the top progressive frameworks today for creating user interfaces. It is ideal for supporting single-page applications with supporting libraries and modern tooling. Vue is also used for mobile and desktop app development with the Electron framework. This front-end tool is widely used by giants like Xiaomi, Gitlab, Adobe, Alibaba, and Behance.

As you begin using Vue, you need to be familiar with the tools, forums, web resources, and framework installation. It can provide you with functional tools for your programming needs. It is also easy to learn since you just need basic knowledge about CSS, HTML, and JavaScript. Vue also has good community support to meet your specific needs.

Vue has integration flexibility and capabilities. So, you can have a more customized experience while using this framework. It enables you to write templates according to your wish. It is ideal to use in different projects without hassle.

Now that you discovered about Vue, let us know how to set up a Vue development environment. As you start setting up in Vue, you need a reliable Vue rich text editor . You can prefer TinyMCE. This rich text editor is loaded with innovative features that can help you hassle-free experience for your front-end development project.

The Process

In this article, we will reveal to you the process of setting up a Vue development environment. We will use the TinyMCE as your Vue WYSIWYG text editor. The TinyMCE Vue.js component can be integrated to Vue.js projects.

TinyMCE Vue.js Integration

You can visit the tinymce-vue storybook to see examples of TinyMCE Vue.js 2.x integration. For TinyMCE Vue.js 3.x integration, follow the steps below:

  1. Clone tinymce/tinymce-vue GitHub repository.

    $ git clone github.com/tinymce/tinymce-vue.git

  2. Installation of needed packages with yarn.

    $ yarn install

  3. Begin the demo server and run:

    $ yarn demo

The tinymce-vue demo runs now. You can visit localhost:3001.

Prerequisites

Before starting procedure, consider the following prerequisites:

 Node.js and npm  tinymce.min.js access on TinyMCE Self-hosted or Tiny Cloud

Setting up Vue Development Environment

  1. Installation of Vue CLI Tool package on command prompt or command line. $ npm install - g @vue/cli

  2. Make a new Vue.js project called tinymce-vue-demo.

Run the following to use interactive prompt:

$ vue create tinymce-vue-demo

Skip interactive prompt:

For Vue.js 3.x users:

$ vue create -- inlinePreset ‘{ “vueVersion” : “3”, “plugins” : { } }’ tinymce-vue demo

For Vue.js 2.x users:

$ vue create -- inlinePreset ‘ { “vueVersion” : “2” , “plugins” : { } }’ tinymce-vue-demo

  1. Change to new created directory.

$ cd tinymce-vue-demo

  1. Installation of tinymce-vue package and save it on package.json with-- save.

For Vue.js 3.x users:

$ npm install -- save “@tinymce/tinymce-vue@^4”

For Vue.js 2.x users:

$ npm install -- save “@tinymce/tinymce-vue@^3”

  1. Use a text editor, open /path/to/tinymce-vue-demo/src/App.vue.

A. You can add TinyMCE configuration to with tag. B. Add import editor from ‘tinymce/tinymce-vue’ to the start of the

This TinyMCE editor configuration must replicate the Basic example page.

  1. Give access to TinyMCE through Tiny Cloud or self-hosting TinyMCE.

Tiny Cloud

You can add an api-key option n the editor element and add your Tiny Cloud API key.

TinyMCE Self-hosted

TinyMCE can also be the self-hosted thorough TinyMCE deployment independent of Vue.js application or bundling TinyMCE with Vue.js application.

 Deployment of TinyMCE independent of the Vue.js application

Use independent deployment of TinyMCE by adding script to or end of the of the HTML file like:

Use independent deployment of TinyMCE by creating Vue.js application. Add script to /path/to/tinymce-vue-demo/public/index.html.

 Bundling TinyMCE with Vue.js application using a module loader

You can bundle TinyMCE with the use of a module loader like Browserify and Webpack.

  1. Test your application with the Node.js development server.

Start the development server by navigating the tinymce-vue-demo directory. Run:

$ npm run serve

Stop development server by selecting on the command prompt or command line and choose Ctrl=C

Application deployment to the HTTP server

Further configuration of the application is needed prior to the production environment deployment. You can see Vue.js-Production Deployment for more details about configuring the application for deployment.

By following these steps, you can setup a Vue development environment.

Conclusion

Setting up the Vue development environment is easy with your text editor. If you have high standards for your rich text editor, you can prefer TinyMCE. It can be your efficient tool for your front-end development process.

Vue can be the best platform for creating your user interfaces. With its features, you have the assurance that you can make your project more successful.