Categories
frontend javascript vuejs

✨8 Vue Projects Every Beginner Should Try

Hey everyone 👋🏻,

In this article, let us see 8 Vue Projects Every Beginner Should Try.

This article was first published on https://the-nerdy-dev.com/.
Check the website for more interesting articles and tutorials on Web Development.

Introduction

Image description

Vue.js is an open-source model–view–view-model (MVVM) front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members

1. 6 Hours Vue.js and Firebase Project – FireBlogs by @traversymedia

Learn how to build a multi-user blog project with Vue.js, Vuex and Firebase.

What will you learn?

  1. Vue.js basics and fundmentals
  2. State Management using Vuex
  3. Working with Firebase

2. Build a COVID Tracker App with Vue.js and Tailwind

In this project, Brad uses Vue.js and Tailwind to create a Simple COVID Tracker Application.

What will you learn?

  1. Vue.js Fundamentals and Basics
  2. Working with Tailwind.css

3. Vue.js + Vuetify + Firebase Project – DevMeetup

In this tutorial, Maximilian Schwarzmuller shows how to build a complete Project – a Developer Meetup App – with Vue.js 2, Vuetify and Firebase. This is a 24 part series.

Image description

www.youtube.com/playlist?list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt

What will you learn?

  1. Vue.js 2 Fundamentals and Basics
  2. Vuetify Components
  3. Working with Firebase

4. Build a Weather App in VueJS | Vue Beginner Tutorial

Learn how to make a Weather app in Vue JS, we use the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch API along with Vue JS Methods and conditionals.

What will you learn?

  1. Vue.js basics and fundamentals
  2. Interacting with APIs via API calls.

5. Build a Invoice App With Vue 3, Vuex & Firebase

In this video, we build out a full CRUD (create, read, update & delete) invoice app using Vue 3, Vuex & Firebase.

What will you learn?

  1. Vue.js basics and fundamentals
  2. Working with Firebase
  3. State Management using Vuex

6. Create a Gridsome Portfolio – Vue.js project

Learn how to make a portfolio kind of an application using Gridsome library with Vue.js

What will you learn?

  1. Vue.js basics and fundamentals
  2. Gridsome library

7. E-commerce Website With Django and Vue Tutorial (Django Rest Framework)

Learn how to build an e-commerce website using Django and Vue from scratch. Django uses Python Vue uses JavaScript.

Django Rest Framework is used to build the API and backend.
The frontend is a separate Vue project. To handle the payments, we implement Stripe.

What will you learn?

  1. Vue.js basics and fundamentals
  2. Learn Django to create a full stack application

8. Full Stack Web App in Vue.js & Express.js

Image description
Learn how to build a full stack application using Vue.js and Express.js with Postgres as the database

What will you learn?

  1. Vue basics and fundamentals
  2. Making a full stack application with Vue.js and Express along with Postgres as the database

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

👉🏻 Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
👉🏻 Join our Discord Server : https://discord.gg/fgbtN2a

Categories
javascript vuejs

Vue.js – Event Handling using v-on directive

Hey guys 👋🏻,
In this post, let us talk about Event Handling in Vue.js using the v-on directive.

For this post we will understand
✔ Event Handling using v-on
✔ One Code Example

Event Handling

For user interactions we can use a special directive called as v-on to attach event listeners that perform some code or invoke methods on our Vue instances. Let us see an example :

Example

Let us define some logic to reverse text on the click of some button. So the steps are :

  1. Create a text data property
  2. Define a reverseText method to reverse the text.
  3. Render it in the template.

Let us see the code for same :

So to attach an event on the button, we use the v-on directive and listen for the click event for the buttons – one is to reverse the text and other two buttons are for incrementing and decrementing some counter reactive property. Let us define the script where we house all our business logic for the component.

So this was all I wanted to cover about Event Handling.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript vuejs

Vue.js – Introduction

Hey guys 👋🏻,
In this post, I will be starting with a new series and it is on Vue.js. So in this first post, let us talk cover the Introduction to Vue.js

For this post we will first understand Props
✔ What is Vue.js ?
✔ How to Get Started ?
✔ Declarative Rendering

What is Vue.js?

Vue.js is a progressive JavaScript Frontend Framework for building modern, sleek and performant user interfaces. It is a very popular framework for building frontend applications just like Angular and React.js

How to get started ?

You can use Vue.js for building small widgets for your multi-page applications. For this you just need the CDN. For more complex applications, use the Vue CLI

Declarative Rendering

Vue.js provides a reactivity system that allows us to render content in a declarative manner right within the template using the mustache {{}} syntax.

Let us define the script where we house all our business logic for the component.

So this was all for the introduction. This is how we can create a basic Vue.js 3 application. We made the app reactive by connecting the data and the DOM.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
html javascript vuejs web development

✨Top 5 resources to learn Vue.js [in no particular order]

✨Top 5 resources to learn Vue.js

Hey everyone 👋🏻,

In this article, I will be mentioning the top 5 resources that I highly recommend if you want to learn Vue.js.

PS : I am not an affiliate of any of these resources/courses. These are just some of my personal recommendations if you are looking to learn Vue.

Introduction

Alt Text

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Here are the top 5 recommendations (in no particular order) of the courses that you should definitely check out for learning Vue.

1. Build Web Apps with Vue 3 and Firebase by Shaun Pelling a.k.a The Net Ninja (rated 4.8)

image

Shaun is a gifted teacher. He knows how to explain stuff in a very easy and lucid manner. This course will definitely take your knowledge to the next level if you are looking to learn this specific technology.

Here is what this course covers

Learn how to create Vue 3 applications from the ground-up

Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc

Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)

Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)

Build & deploy 4 real-world web apps with Vue & Firebase
Learn how to implement an authentication system into your Vue js apps using Firebase Auth

Become a Vue 3 ninja!

Course Link :

https://www.udemy.com/course/build-web-apps-with-vuejs-firebase

2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)

image

This course as the name can probably tell you covers the internals of Vue in great detail. The course starts from the very basics like What Vue.js is and how it works and later on moves to more complex and advanced topics

Here is what this course covers

What is VueJS and Why would you use it?

The Basics (including the basic Syntax, Understanding Templates and much more!)

How to Output Reactive Data & Listen to Events

Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)

Setting up a Development Environment and Workflow

Using Components (and what Components are to begin with)

A Deep Dive Look Behind the Scenes of Vue

Binding to Form Inputs

Sending Http Requests to Backend APIs

Authentication & Vue

How to make your App more Beautiful with Animations and Transitions

How to create an awesome Single-Page-Application (SPA) with Routing

How to improve State Management by using Vuex

How to Deploy the App

and more …

Course Link :

https://www.udemy.com/course/vuejs-2-the-complete-guide

3. Vue Mastery

This is a complete path for learning Vue.js from some prominent industry experts pertaining to the technology.

image

image

Here is what this course covers

Their courses are distributed in form of paths. You may want to try them out as well.

image

Course Link :

https://www.vuemastery.com/courses

4. VueSchool.io

image

Here is what this course covers

image

You may want to try their complete suite of courses to enhance your Vue.js Knowledge. So down below, you can find the link for their website :

Course Link :

https://vueschool.io/courses

5. Vue.js Documentation (a must thing to refer)

image

Docs link :

https://v3.vuejs.org/

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.