This article was originally published at https://www.blog.duomly.com/vue-js-project-ideas-for-beginners/
Intro to Vue JS project ideas for beginners
In this article, I’m going to share another list of project ideas, today for the Vue.js apps.
You could realize that we’re publishing articles with a list of project ideas for the particular front-end technology to provide you some apps ideas that you can create to practice coding and create an excellent portfolio.
I’ve already created the following project ideas lists:
- 11 ideas for the HTML and CSS projects,
- Javascript project ideas for beginners ,
- React.js project ideas.
I thought that there are many more technologies that you’d like to learn and practice and also have in your coding portfolio. That’s why today, I’ll list 9 Vue.js project ideas for beginners.
Of course, you should be aware that you can create projects form other lists in any other framework as well, but by giving you the separate list for all of them, you have a much bigger choice.
If you don’t feel very comfortable with Vue.js and you’d like to practice it a little more, I encourage you to take a look at our Vue.js tutorial, where I’m showing you how to build a simple app with API.
Also, remember to create a Github repository for all your projects to build a coding portfolio and show it to your future employer. If you’d like to remind yourself how to create a Github repo, take a look here.
And as always, I’ve got the video version of this listing for you, so if you are the one who prefers to watch, then read and jump to our Youtube channel!
Are you ready to find out how to practice Vue.js and how to create an awesome coding portfolio?
Vue.js project ideas - additional information
After completing the first and second steps of your front-end career path, HTML, CSS, and Javascript, you face the framework choice. It was kind of easy some time ago because jQuery was the king, and nothing more existed.
Nowadays, we can get a huge headache when we have to decide what to learn. There are three very powerful technologies on the market, Angular, React.js, and Vue.js. Each of them has advantages and disadvantages, but this article won’t be about choosing technology. If you decided to add Vue.js to your career path, then you can find it useful to create some of the projects I’ll list below.
When you are building Vue.js applications, it’s worth keeping in mind that some additional, external libraries dedicated to this framework may be useful. The ones that would be good to get familiar with the Vuex, Vue Router, and Vue Server Renderer.
Vuex is a state management pattern and library for Vue.sj apps. It provides a centralized store and set of rules ensuring the proper mutation of the values in the state.
Vue Router is an official router for Vue.js.
Vue Server Renderer is a library for Vue.js used for server-side rendering, which may be a very useful solution in some cases. It helps to improve SEO and loading time of the application.
Now, you’re already aware of most of the needed libraries that can be useful in most applications, so we can start with the list of the Vue.js project ideas that you can create for training!
Let’s start!
1. Checkout Form
My first idea for the Vue.js project for beginners won’t be the whole application, it will be more a component for checkout step in the eshop. You don’t need to create the whole e-commerce, you can just create the page that will have a little more advanced form to get user data, 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 biggest advantage of the project like this is that you’ll be able to learn how to generate forms and handle data changes in Vue.js. You could also try to combine it with the Vuex and save data into 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
Idea number two is an app to keep your recipes in one place. If you have ever learned to cook, you can imagine how difficult it is to remember everything steps by step. The recipes app could be a great solution.
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. 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.
So, the Q&A application should have the following views: the questions listing, the form for adding the question, the form for answering the question, and the view of the question with all answers.
There are a few solutions you could use in this kind of application. You can display particular questions with answers as a separate view. The other method is to show all answers for the question in the expanded panel in the main listing.
The forms for the adding question and answers also can be added as separate views, or as a component at the end of the list for answers or on the top of the listing for the questions. Another solution could be to place the forms in the modals.
Or maybe you will have some more ideas for improving the UX of your Q&A application.
4. Weight Tracking App
If you have ever tried to exercise and improve your physical form, you probably used any weight tracking app to track your progress, and you may have any idea how it should work.
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.
5. Job Board Aggregator with an API
The Vue.js project idea number five 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.
The job board should have a listing of all the jobs got from API. For the details you have two options, you could redirect to the native page of the ad directly from the listing, or you could create a details list and then with the Apply button redirect the user to the native job offer or the application form.
6. Countries Directory
My next Vue.js project idea is countries directory. It’s an application where you can use an existing, free RESTcountries API where you can list all countries, and later display the details of each country.
In this project, you can also implement the searching feature with the API call to return the searched country. Besides that, there’s also an option for practicing the filtering feature and the sorting feature.
An excellent idea for a front-end developer would be to list the countries in the table and make it sortable by header values.
7. News Website
The seventh 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.
8. OCR (Optical Character Recognition) App
Idea number eight seems really interesting from my point of view, and I think it may be interesting for you. 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.
For this application, besides the implementation of the OCR API (you can find it for free on the internet), you have to create the file upload to provide the image 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.
9. Url Shortener
The last Vue.js project idea I've got for you here is the URL shortener app.
In this application, the main feature will be the input for the link you'd like to shorten and the result's output space. You could also create a function to copy the shortened link by clicking the icon.
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 9 Vue.js project ideas 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.
If you don't feel confident in Javascript, feel free to check out our Javascript Course, our Youtube videos about Javascript and Vue.js, and our blog, where you could find many front-end tutorials.
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.
Thank you for reading,
Anna from Duomly
Top comments (1)
Thanks for sharinf @anna