What is Vue?
Tags: webdev, beginners, programming, vue
Published: 2023-02-06 16:08:47


[Vue.js](https://v2.vuejs.org/)  is a progressive open-source  [MVVM](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)  frontend  [JavaScript](https://flatlogic.com/blog/7-trends-in-javascript-to-look-for-in-2020/)  framework that is designed to be implemented incrementally since the core  [library](https://flatlogic.com/blog/best-libraries-for-react-i18n/)  focuses only on the presentation layer. Nevertheless, this framework is used for building  [UI](https://flatlogic.com/blog/react-admin-templates/)  (user interfaces) and complex single-page applications with modern tools and libraries to support them. It enables you to take advantage of libraries for client-side routing and state management when you need it.

[Vue.js](https://flatlogic.com/blog/9-awesome-projects-built-with-vue-js/)  was created in 2014 by Evan You and is supported by him and other active core team members. Interesting fact,  [Vue](https://flatlogic.com/blog/13-bootstrap-date-picker-examples/).[js](https://flatlogic.com/blog/8-reasons-to-use-javascript-libraries-in-project-management-apps/)  version names are often derived from manga and anime, the majority of them within the science fiction genre.

Vue is also usable for both desktop and  [mobile application development](https://flatlogic.com/blog/top-8-code-editors-for-mobile-application-development/)  due to its HTML and JS base extensions working in sync with the Electron framework, which makes it the most preferred frontend tool. Vue.js implements this through an  [MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)  (Model View Controller) architecture to view the user interface of an application or website, using its underlying library by default.

## **Why use Vue**

Vue  [frameworks](https://flatlogic.com/blog/top-10-bootstrap-alternatives-for-2020/)  provide the following full set of features that make it easy for developers to get to the UI:

-   **Transition**

Vue.js offers a variety of ways to realize transitions to HTML components when updating or adding something from the DOM. It also provides the ability to add animated third-party libraries to customize and design a better-cooperative UI.

-   **VDOM**

Vue works using VDOM (virtual DOM). Changes to the state made during application development will not be reflected directly in the DOM. VDOM is produced instead, which is generally found in JS data structures, allowing the developer to test their design and review changes to the  [UI design](https://flatlogic.com/blog/7-reasons-why-ui-matters-in-web-development/)  without worrying about cost-effectively undoing them.

-   **Libraries and toolkits**

Vue includes a considerable toolkit for all the elementary programming needs provided on its main page:

-   Browser development tools are used to fix bugs in applications developed with Vue.
-   [Vue CLI](https://cli.vuejs.org/)  (command-line interface), which is used to install and create the main Vue framework libraries and third-party plugins.
-   [Vue Router](https://router.vuejs.org/).
-   [Vue Loader](https://vue-loader.vuejs.org/).

**Advantages of Vue**

Each framework has its own special features and characteristics that make them known and receive priority over other frameworks. Vue.js holds the record for the highest number of stars on Github.com in the last 5 years. While the Vue.js community is smaller than ReactJS, the record of Vue.js stardom describes and tells the story of its fans. So here’s a list of the best features of Vue.js and the reasons why developers chose it:  [![](https://b1694534.smushcdn.com/1694534/wp-content/uploads/2022/04/speed-up-web-dev.png?lossy=1&strip=1&webp=1)](https://flatlogic.com/templates/?utm_source=flblog&utm_medium=banner&utm_campaign=internal-traffic-from-blog)

-   **Performant and size-efficient.** [Vuejs](https://flatlogic.com/blog/react-vs-vue-what-to-choose-in-2023/)  is a lightweight framework with a package size of just 21KB, which is what sets it aside from its competitors. The virtual DOM also greatly speeds up rendering.
-   User-friendly. Vue has some of the most comprehensive and strongest documentation, with everything from tutorials to step-by-step guides. Vue has a component-based interface: you can find everything you need in a single `.vue’ file. All you need is a basic knowledge of  [CSS](https://flatlogic.com/blog/what-is-material-ui/), HTML, and JavaScript to start exploring Vue.js.
-   Community. Vue has a very supportive and dedicated community. There are a lot of forums and chats where Vue.js is tagged. More than 135,000 Github members are using Vue.js.
-   Progressive nature. The Vue framework can be implemented into your codebase incrementally instead of redesigning everything in a single swoop. Move from component one to one to get the whole endeavor off to a more controlled one.

### **Who uses Vue.js**

Here is the list of companies that use Vue.js:

-   [Alibaba Group](https://www.alibabagroup.com/en/global/home)
-   [Netflix](https://www.netflix.com/)
-   [Xiaomi](https://www.mi.com/global/index.html)
-   [Adobe](https://www.adobe.com/)
-   [Gitlab](https://about.gitlab.com/)
-   [Behance](https://www.behance.net/)
-   [9GAG](https://9gag.com/)
-   [Apple](https://www.apple.com/)
-   [Google](https://www.google.com/)
-   [BMW](https://www.bmw.com/en/index.html)

## **How to Create a Vue app using the Flatlogic Platform**

There are two ways to build your application on the  [Flatlogic Platform](https://flatlogic.com/blog/flatlogic-platform-updates-november-2021/): you can create a simple and clear front-end application, generated by the CLI framework, or the  [CRUD](https://flatlogic.com/blog/crud-app/)  application with frontend+backend+database.

## **Creating a CRUD application with Flatlogic**

### **Step 1. Choose a Tech Stack**

In this step, you’re setting the name of your application and choosing the stack: Frontend, Backend, and Database.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jna39t0fefx2tw6q26dn.png)

### **Step 2. Choose the Starter Template**

In this step, you’re choosing the design of the  [web app](https://flatlogic.com/blog/bootstrap-vs-material-ui-which-one-to-use-for-the-next-web-app/).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1b3lkroh37sajqve40.png)

### **Step 3. Schema Editor**

In this step, you can create your database schema from scratch, import an existing schema, select one of the suggested schemas or you can define a database schema and add a description by clicking on the “Generate with AI” button. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lsba1gfrfwsngrkwl9a.png)

To define a database schema and add a description by clicking on the “Generate with AI” button. You need to type the application’s description in the text area and hit “Send”. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tkms51u71md278sklh6.png)

The application’s schema will be ready in around 15 seconds. You may either hit deploy immediately or review the structure to make manual adjustments.

### **Step 4. Choose Integration method & Features**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0zlxgczalkw37tzvhc1.png)

Next, you can connect your GitHub and push your application code there. Or skip this step by clicking the Finish and Deploy button and in a few minutes, your application will be generated.

## **Creating a one-page application with Flatlogic**

You can create a frontend-only app with the  [Flatlogic](https://flatlogic.com/blog/stand-with-ukraine/)  Platform. This assumes you are  [hosting](https://flatlogic.com/blog/what-is-hosting-and-domain-name/)  the back-end somewhere else or do not need it at all. To generate a one-page application you don’t need to enter anything in the terminal of your  [IDE](https://flatlogic.com/blog/best-10-ides-for-react-js-for-2021/), you just need to go to the page of creating an application on the  [Flatlogic](https://flatlogic.com/projects/new)  website and make only 2 steps:

### **Step 1. Choose a Tech Stack**

In this step, you set the name of your application and choose the stack: Frontend as Vue, Backend as No-Backend.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmdmh48bgz5lafu8v82e.png)

### **Step 2. Choose the Starter Template**

In this step, you choose the design of the  [web](https://flatlogic.com/blog/top-angular-open-source-projects/)  app. Since this is a standard one-page application created using the CLI framework, it will have the design of a standard one-page Vue CLI application.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqaamozaphuke15wcw0p.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lb5h34ch2zyzioijui5.png)

In the end of app creation, you can deploy your it and in a few minutes, you will get a one-page Vue application, which you can further modify as you like.