Vuejs Project For Beginners – Codelivly

Related Articles

Vuejs project for beginners: Vue.js is one of the most popular javascript frameworks along with React.js and Angular. It is designed so that you can gradually adopt and focus on the display layer only.

You may have noticed that we publish articles with a list of project ideas for each front-end technology to provide you with some ideas for apps for practicing coding and building a great portfolio.

In this article, I’m going to share another list of project ideas, today for Vue.js. apps

1. POS form

My first Vue.js project for beginners will not be the entire program; Instead, it will be a component of the eshop payment phase. You do not have to build an entire e-commerce site; You can only create a page with a more complicated form for collecting user information, a shipping address and a means of payment.

In the future, you can think about growing it into a full and functional eshop store, or you can reuse it in other projects.

The main benefit of such a project is that you can learn how to use Vue.js to generate forms and handle data updates. You can also use it in conjunction with Vuex to save data to the country.

The design of the payment form is not a big deal, it would be just fine if you use any CSS framework like Bulma or Bootstrap.

2. Recipes app

This is an app that allows you to keep all your recipes in one place. You can imagine how hard it is to remember everything step by step if you have ever learned to cook. The recipes app might be a great option.

It should consist of three main elements: the listing with all the recipes, a form for adding a new recipe and a detailed view of the selected recipe.

Here you can practice using the Vue Router to display the recipes by ID.

As for designing the recipes app, you can find a lot of examples online to get inspired.

3. V-Dashboard

V-Dashboard Is a starter template of a dashboard developed by Robert Soriano. Based on Laravel’s Dashboard, V-Dashboard built with Vite, Vue 3, Tailwind CSS and TypeScript. It supports in-box login and comes with a large list of user interface components. This is a great dashboard to use if you want to use Vue 3 and TypeScript, unlike a lot of other dashboards.

4. Questions and Answers app

In a previous article on React.js projects, I suggested you create a tutorial blog, and in the case of Vue.js, I want to talk about the Q&A app as the third idea. The main idea of ​​the project is that users can as a question, which is then posted on the main page, where others can read it and answer.

As a result, the application of the questions and answers should include the following views: a list of questions, a form for adding a question, a form for answering a question and a display of the question with all the answers.

There are several options available for this type of application. As a separate view, you can view specific questions with answers. The second option is to display all the answers to the question in the front panel of the main listing.

You can include the question and answer forms as standalone views, or as an element at the end of the answer list or at the top of the question list. Another option is to put the forms inside the models.

Or you may have a few more ideas for improving the UX of implementing your Q&A.

5. Tightening

Stepping Is a must-use for programmers with a focus on tools, monitoring and DevOps. Developed by e Stepping Team, Statping is a simple web application to use for monitoring your websites and applications. The data is automatically refreshed, and simply built on thanks to their clean interface. Its simple and intuitive user interface makes monitoring new services and configuring alerts simple. It’s simple to interface with Slack, Twilio, email and other services. There is even a smartphone app!

6. Weight tracking app

If you have ever tried to exercise and improve your physical condition, you have definitely used weight tracking software to track your progress and get a general idea of ​​how it works.

First of all, the app should have a component where the user can add his weight data, and it should be saved with the current date.

Second, you can think of a form for adding measurements, like a waist, for example.

Besides, you can add something to the data simulation and display the graph of weight changes and measurement.

The big idea might be to add announcements about progress and travel in appropriate colors.

7. Aggregate workspace with API

The idea of ​​the Vue.js project number 7 is a job board that combines the job offers from different sites.

This application will require an API connection. You have two options. You can check some required boards and take some APIs to get data and view it or use an API from another aggregator portal, like Indeed API.

All jobs obtained through the API should be listed in the job board. You have two options for details: you can link the user to the original page of the ad directly from the listing, or you can create a list of details and then direct the visitor to the original job offer or application form using the Apply button.

8. News site

The eight idea for the Vue.js project and the external API will be a news site. For this application, you can create the main page view, where you will see the current news on the web or in the list, and then you can reuse the view as a category page.

For this application, you can use NewsAPI, Which is easy to use, well documented and provides a lot of information for presentation.

When the user clicks on the news card, he or she will be taken to the source page.

This type of project can also be a great idea to host it online and start using it as your own new site and make some money.

9. OCR (Optical Character Recognition) application.

The main purpose of the OCR application is to implement the API to parse the image with text to a JSON file.

This is something completely different from most of the apps offered here as a training app, so I think you should definitely give it a try.

Aside from implementing the OCR API (which you can find for free online), you will also need to create a file upload to provide the image for the API.

Definitely, worth creating such a project, as it will be one of the eye-catching projects in your portfolio.

10. Shortens URLs

The latest idea for the Vue.js project I have here is the URL shortener app.

The main features of this app are the input for the link you want to shorten and the output space for the result. You can also make clicking on the icon copy the shortcut.

The process should happen with the external API call, like the API, which is free and well documented, and it makes it easy for beginners to use as well.

This project could also be something more eye-catching than just plain data displayed from the API.


In this article, I have suggested Vue.js project for beginners That you can create for training and building your coding portfolio.

It is worth remembering that projects from other articles with project ideas for frameworks can be done in any of them, so you will have a greater choice if you look at the React.js projects.

I hope you find this article useful to increase your portfolio and practice your Vue.js skills by creating some of the projects I mentioned above.

If you have cool and interesting projects, please contact us! I would love to look at them.



Please enter your comment!
Please enter your name here

Popular Articles