Vuejs Project For Beginners

Vuejs project for beginners: Vue.js is one of the most popular javascript frameworks along with React.js and Angular. It designed to be incrementally adoptable and focused on the view layer only.

You may have noticed that we’re posting articles with a list of project ideas for each front-end technology to provide you some app ideas to practice coding and build a great portfolio.

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

1. Checkout Form

My first Vue.js project for beginners won’t be the entire program; rather, it will be a component for the eshop’s checkout phase. You don’t have to build the entire e-commerce site; you may only make a page with a more complicated form to collect user information, shipping address, and payment method.

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

The main benefit of a project like this is that you’ll be able to learn how to use Vue.js to produce forms and handle data updates. You may also use it in conjunction with Vuex to save data to the state.

The design of the checkout form isn’t a big deal, it will be totally fine if you’d use any CSS framework like Bulma or Bootstrap.

2. Recipes App

This is an app that allows you to keep all of your recipes in one place. You can imagine how difficult it is to recall everything step by step if you’ve ever learnt to cook. The recipes app might be an excellent option.

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

Here you could practice using the Vue Router for displaying the recipes by id. 

Regarding the recipe app design, you can find a lot of examples on the internet to get inspiration.

3. V-Dashboard

V-Dashboard is a dashboard starter templated developed by Robert Soriano. Based off of a Laravel dashboard, V-Dashboard is built with Vite, Vue 3, Tailwind CSS, and TypeScript. It supports login out of the box and comes with a large list of UI elements. This is a great dashboard to use if you want to use Vue 3 and TypeScript, unlike a lot of other admin dashboards.

4. Q&A App

In a previous article about React.js projects, I suggested you create a blog for training, and in the case of the Vue.js, I’d like to talk about the questions and answers application as the third idea. The main concept of the project is that users can as a question, which is then listed on the main page, where others can read it and reply.

As a result, the Q&A application should include the following views: a list of questions, a form to add a question, a form to answer a question, and a view of the question with all replies.

There are a few options available for this type of application. As a separate view, you can show specific questions with answers. The other option is to display all of the answers to the question in the main listing’s anterior panel.

The forms for adding questions and answers can be be included as independent views, or as a component at the end of the answers list or at the top of the questions list. Another option is to put the forms inside the modals.

Or maybe you will have some more ideas for improving the UX of your Q&A application.

5. Staping

Statping is a must-use for programmers with a focus on tooling, monitoring, and DevOps. Developed by the Statping team, Statping is a simple to use web app for monitoring your websites and applications. Data is automatically refreshed, and it’s simple to build on top of thanks to its clean interface. Its simple and intuitive UI makes monitoring new services and configuring notifications a breeze. It’s simple to interface with Slack, Twilio, email, and other services. There’s even a smartphone app!

6. Weight Tracking App

If you’ve ever tried to exercise and improve your physical condition, you’ve definitely used a weight-tracking software to keep track of your progress and have a general concept of how it works.

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

Secondly, you could think of a form for adding the measurements, like waist, for example. 

Besides that, you could add something for the data visualization and display the graph of the weight and measurement changes. 

The great idea may be to add notifications for the progress and regress in suitable colors.

7. Job Board Aggregator with an API

The Vue.js project idea number seven is a job board that aggregates the job offers from different websites.

This application would require an API connection. You have two options. You could check a few job boards and take a few APIs to get data and display it or use an API from another aggregator portal, like the Indeed API.

All of the jobs obtained using API should be listed on the job board. You have two options for the details: you may connect the user to the ad’s native page directly from the listing, or you can create a details list and then redirect the visitor to the native job offer or application form using the Apply button.

8. News Website 

The eight idea for the Vue.js project and the external API would be a News website. For this application, you could create the main page view, where you’d show the current news in a grid or a list, and then you could reuse the view as a category page. 

For this application, you could use the NewsAPI, which is easy to use, well-documented, and provides a lot of information to display. 

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

This kind of project can also be a great idea to host it on the internet and start using it as your own new website and earn some money. 

9. OCR (Optical Character Recognition) App

The OCR App’s main goal is to implement the API to parse the image with text to the JSON file. 

It’s something totally different then most of the applications suggested here as a training app, that’s why I think you should definitely try it. 

Apart from implementing the OCR API (which you can find for free on the internet), you’ll also need to create a file upload to deliver the picture for the API.

Certainly, it’s totally worth creating a project like this, as it will be one of the most eye-catching projects in your portfolio.

10. Url Shortener

The last Vue.js project idea I’ve got for you here is the URL shortener app. 

The key features of this application are the input for the link you want to shorten and the output space for the result. You could also make it so that clicking the icon copies the shortened link.

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

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

Conclusion

In this article, I suggested Vue.js project for beginners that you can create for training and to build your coding portfolio.

It’s good to keep in mind that projects from other articles with project ideas for frameworks can be done in any of them, so you will have the bigger choice if you’d take a look at the React.js projects.

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

If you have any cool and interesting projects, please reach out! I’d love to have a look at them.

Leave a Comment