DEV Community: Owais Khan

How to create a vue project using vite

Owais Khan — Sat, 01 Apr 2023 12:38:11 +0000

In this article we will see how to create a vue app using vite.

First install vite

npm install vite

To create vue app using vite type below command in terminal and press Enter

npm init vite <project-name>

After the above command we will be prompted with few questions like which framework we want to use and we will choose vue and which language JavaScript or TypeScript.

When vite completes creating vue project for us then we have to install all the dependencies for our project using below command

npm install

With that we have created our vue app using vite.

To run our project locally:

npm run dev // starts development server at localhost/5173

How to create a calendar in Vue

Owais Khan — Sun, 12 Mar 2023 09:25:49 +0000

Calendar

In this article we will create a calendar using vue.js.

Setup

First create a vue project using vite. After creating the project delete all unnecessary code and files created by vite.



npm init vite <project-name> // creates vue project using vite 
cd <project-name> // move in to the project created by vite
npm install // installs all necessary dependecies for our project
npm run dev // runs development server at http://localhost:5173/

Creating calendar

Our calendar will be divided into two main components Header and calendarGrid. Header component will contain name of month, year and chevrons/arrows for changing date.calendarGrid component will contain days and their corresponding dates. And both of these components will live inside one calendar component. So, lets first create calendar.vue in src/components folder and import Header and calendarGrid components into it.

calendar.vue👇🏻



<script setup>
    import Header from './Header.vue'
    import calendarGrid from './calendarGrid.vue'
</script>
<template>
    <main>
        <!-- Using Header and calendarGrid Component -->
        <Header/>
        <calendarGrid/>
    </main>
</template>
<style scoped lang="less">
    main{
        width: 500px;
        padding-bottom: 30px;
        border-radius: 5px;
        background-color: azure;
        box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.5);
        @media(max-width: 500px){
            width: 90vw;
        }
    }
</style>

For vue to compile our calendar.vue we need to import it into App.vue component because vue passes App.vue to createApp function in main.js for compiling. So, lets do that:

App.vue👇🏻



<script setup>
    import calendar from './components/calendar.vue'
</script>
<template>
    <main>
        <!-- Using calendar Component -->
        <calendar/>
    </main>
</template>

Now, lets create Header.vue component in src/components folder. In Header.vue we will create a div with class header inside of which we will create further two div elements with classes info and wrapper. .info element will contain year and .wrapper element will contain chevrons and name of month. And at last we will add some styles to it.

Header.vue👇🏻



<script setup>
    import chev from '../assets/chev.svg' // importing chevron image
</script>
<template>
    <div class="header">
        <div class="info">
            <div class="year">
                <p>2023</p>
            </div>
        </div>
        <div class="wrapper">
            <div class="left-chev chev">
            <img :src="chev" alt="left-chevron">
            </div>
            <div class="month">
                <h2>February</h2>
            </div>
            <div class="right-chev chev">
                <img :src="chev" alt="right-chevron">
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
    .header{
        display: flex;
        flex-direction: column;
        padding: 10px;
        background-color: antiquewhite;
        border-radius: 5px 5px 0 0;
        .wrapper{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            .month{
                h2{
                    font-size: 32px;
                    font-weight: bolder;
                    letter-spacing: 5.5px;
                }
            }
            .chev{
                user-select: none;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: background-color .5s;
                &:hover{
                    background-color: rgb(243, 206, 158);
                }
                img{
                    width: 100%;
                    height: auto;
                    transform: translateX(2px);
                }
            }
            .left-chev{
                transform: rotate(180deg);
            }
        }
    }
</style>

With that we have created Header.vue. Now, we will create calendarGrid.vue component.

In calendarGrid component we will create a div with calendar-grid class which will contains two div elements with classes days-grid and date-grid. .days-grid will contain 7 div elements with class day which will contain days of week sunday to saturday. But instead of creating indivisual div elements we will create an array of week days and we will loop over that in our template using v-for directive. .date-grid element will contain 31, 30, 28 or 29(depending on the month) div elements with class date which will contain dates in .val element. But for now we will render 31 days using range function and v-for directive for the sake of layout. We will change it when we will implement functionality for our calendar.

calendarGrid.vue👇🏻



<script setup>
    const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
</script>
<template>
    <div class="calendar-grid">
        <div class="days-grid">
            <div
                v-for="day, index in DAYS"
                :key="index"
                class="day"
                :title="day"
            >{{ day[0] }}</div>
        </div>
        <div class="date-grid">
            <div class="date"
                v-for="date in range(31)"
            >
                <div 
                    class="val">
                    {{ date }}
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
    .calendar-grid{
        margin-top: 15px;
        display: grid;
        gap: 20px;
        user-select: none;
        .days-grid{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            justify-content: space-between;
            align-items: center;
            .day{
                text-align: center;
                font-weight: bold;
                &.today{
                    color: blueviolet;
                }
            }
        }
        .date-grid{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            justify-content: space-between;
            align-items: center;
            row-gap: 20px;
            .date{
                display: flex;
                justify-content: center;
                cursor: pointer;
                .val{
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 15px;
                    position: relative;
                    background-color: antiquewhite;
                }
            }
        }
    }
</style>

And with that layout of our calendar is completed.

Adding Functionality

Basic functionality of our app includes changing dates and to highlight current day and date and also to arrange dates in correct order with respect to their corresponding days. For that we have to create quite a few reactive states and then we have to pass those states from one component to another and evetually we will extend the functionality of our app for adding events for which we have to pass state between sibling components which makes state management bit difficult. So, to manage state easily we will manage states at global level so that any component can access that state. To manage state at global level we can use state managers like vuex or pinia but this app not that big and complex so we will use vue's built in provide/inject functions.

Provide function

Vue's provide function allows us to share state/data from higher component to the lower components. E.g: If we have five components A, B C, D and E where B and C are children of A, D is child of C and E is child of D. Component A contains a state x which we want to use in component E which we can do by passing state x from A to C, C to D, D to E. In this example, for using state x in component E we had to pass it to components C and D which do not need this state.This process of passing data/state from parent component to child component (where child component can be at any depth in component tree) as props is known prop drilling.

Component tree with prop drilling



                                      A ----> contains state 'x'
                                      |x <---- passing 'x' from A -> C
                                      |x x x
                                ------------x
                                |          |x
                                |          |x
                                B          C <--- Doest not use 'x'
                                            \x <---- passing 'x' from C -> D
                                             \x
                                              D <--- Doest not use 'x'
                                               \x<---- passing 'x' from D -> E
                                                \x
                                                 E ----> uses state 'x'

provide function helps us to avoid prop drilling meaning we can pass state x directly from A to E without prop drilling. Lets see how to do it.

Provide function takes two arguments first is key and second is the state that we want to share. Key is used to access the shared state in child component.

In component A



import {ref, provide} from 'vue'
const x = ref(0)
provide('store', x) // sharing state x and setting 'store' as key

Note: value in provide function can be of any type like string, number, array, object e.t.c

Inject Function

Vue's inject functions allows us to use state shared by parent component in child component. Inject function takes one argument which is the key that we passed to provide function in parent component.

In component E



import {inject} from 'vue'
const x = inject('store') // accessing state 'x'
console.log(x.value) // prints 0

Component tree without prop drilling



                                      A ----> contains state 'x' and share it using provide
                                      |
                                      |
                                ------------
                                |          |
                                |          |
                                B          C
                                            \
                                             \
                                              D
                                               \
                                                \
                                                 E ----> uses state 'x' using inject

Lets see how to use provide/inject in our calendar app. Our app have a state called date which is used in almost every component so, lets make it a global state or app level state. To create app level state we will use provide function inside main.js.

main.js 👇🏻



import { createApp, ref } from 'vue'
import './less/global.less'
import App from './App.vue'

const date = ref({date: {
        str: new Date(),
        dateString: new Date().toDateString()
    }})
createApp(App)
    .provide('store', date) // providing date state to every component in our app.
    .mount('#app')

date is simply an object which contains two properties str and dateString. str store a date object which gives us current date and dateString gives us date in more simpler format like this 'Sat Feb 27 2023'. But other than date we have more states in our app that we want to make global. For that we will create a single object which will contain all of our global states. And to keep our main.js clean and clutter free we will create our global state in different file and then we will import that file into main.js.

Create store.js in src/store folder. store.js will contain global state.

store.js👇🏻



import { ref } from 'vue'
export const state = ref({
    date: {
        str: new Date(),
        dateString: new Date().toDateString()
    }
})

state in store.js is a single global reactive state that contains all states for our app. Now, lets import state in main.js.



import { createApp } from 'vue'
import './less/global.less'
import App from './App.vue'
import { state } from './store/store.js'

createApp(App)
    .provide('store', state) // providing single global state object to every component in our app.
    .mount('#app')

Now, we can use state object in any component of our app. Lets use state in Header.vue. In Header.vue we need month and year which we can extract from dateString property of date object inside state. We will also create a component level state current which will contain month and year that we will extract from dateString. One thing to note that dateString gives only first 3 intials of month name meaning for January it will give Jan and so on. But we want full month names so, we will create a MONTHS object with months first 3 initials as key and months fullname as value that way we can get fullname of months from first 3 initials.

Header.vue👇🏻



<script setup>
    import { ref, inject } from 'vue'
    import chev from '../assets/chev.svg'

    const MONTHS = {
        Jan: "January",
        Feb: "February",
        Mar: "March",
        Apr: "April",
        May: "May",
        Jun: "June",
        Jul: "July",
        Aug: "August",
        Sep: "September",
        Oct: "October",
        Nov: "November",
        Dec: "December"
    }
    const state = inject('store') // accessing state using inject function
    const [ _, month, __, year ] = state.value.date.dateString.split(' ') // extracting month & year from dateString
    const current = ref({
        month: MONTHS[month], // getting month fullname from MONTHS object using months first 3 initials
        year
    })
</script>

<template>
    <div class="header">
        <div class="info">
            <div class="year">
                <p>{{ current.year }}</p> <!-- Using year from current state above -->
            </div>
        </div>
        <div class="wrapper">
            <div class="left-chev chev">
            <img :src="chev" alt="left-chevron">
            </div>
            <div class="month">
                <h2>{{ current.month }}</h2> <!-- Using month from current state above -->
            </div>
            <div class="right-chev chev">
                <img :src="chev" alt="right-chevron">
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
    /* styling goes here */
</style>

Until now our calendar is only showing current month and year but we want it to change month and year depending on the chevron we click E.g: if we click on right chevron and current month is february calendar should change it to march and if month is december and year is 2023 then calendar should change month to january and year to 2024. And reverse should happen if we click on left chevron. Now all of this to happen we have to update date object inside global reactive state. We can update date in Header.vue component but vue documentation recommends not to change global reactive state in child components rather create a function at global level which will be responsible for updaing/changing global state. We will create and export this function from store.js file and we will name it dispatch and after that we will import it in main.js and then instead of passing state as value to provide function we will pass an object which contains state and dispatch function as properties to provide function because of which we can access dispatch in components for updating/changing global state.

store.js👇🏻



import { ref } from 'vue'
export const state = ref({
    date: {
        str: new Date(),
        dateString: new Date().toDateString()
    }
})

export const dispatch = () => {} // we will implement it in a bit

main.js👇🏻



import { createApp } from 'vue'
import './less/global.less'
import App from './App.vue'
import { state, dispatch } from './store/store.js' // importing dispatch

createApp(App)
    .provide('store', { state, dispatch }) // providing an object containing global state and function to update/change global state to every component in our app.
    .mount('#app')

Now, lets understand how dispatch function will work. In our app we will change date in different ways E.g; clicking on right chevron will change date in inreasing order and clicking on left chevron will change date in decreasing order and we may perform different actions on our app which can change calendar in different ways then how a single function is able to handle every type of change and the answer is that we will create separate functions for each type of action we perform on calendar and dispatch function will only decide which function to execute. Lets say we have a function increase which increases the date when we click on right chevron but we cannot invoke increase function directly because to increase date we have to update date object which is in global state object and to update global state we have to use dispatch function so, when user clicks on right chevron we will call dispatch and then dispatch will call increase function and same thing will happen when user clicks left chevron but instead of calling increase function dispatch will call decrease function which decreases the date. So, how does dispatch knows which function to invoke when user performs any action? When we call dispatch function we will pass an argument known as action to it. Based on this argument dispatch is able to decide which function to call. action is simply an object with property type whose value is simply a string which describes what the action is. If we want to increase date by clicking on right chevron for that we will first call dispatch and pass action object as an argument like this dispatch({type: 'INCREASE'}) and in dispatch function we will recieve this action as parameter and inside that function we will check the type of action object and if it is INCREASE it will call increase function which increases the date. In addition to type we can also add more properties to action object if we want to send additional data to dispatch function.

Lets add click event listeners on right and left chevrons in Header.vue component. When user clicks on any of the chevron it calls a handleClick function and we also pass an argument to this function and that argument is 'next-month' or 'previous-month' depending on the chevron user clicked. In handleClick function we call dispatch and pass an action as argument and that argument looks like this



const handleClick = (direction) => dispatch({type: 'updateDate', payload: {direction}})

In above code handleClick function recieves a parameter direction which is either 'next-month' or 'previous-month' depending on the chevron user clicked and inside the function we are calling dispatch with an object as argument and this argument is an action which contains two properties type and payload. The value of type specifies what type of action is being performed meaning in this case user has clicked one of the chevrons so we have to update date either in increasing or decreasing order that is why value of type is 'updateDate' and payload is an object which is used to send additional data to our dispatch function.

Now, inside dispatch function we have to check the type of the action and based on that we will call an appropriate function for updating date.

store.js👇🏻



import { ref } from 'vue'
export const state = ref({
    date: {
        str: new Date(),
        dateString: new Date().toDateString()
    }
})

export const dispatch = (action) => {
    // checking the type of action
    if(action.type === 'updateDate'){
        const newDate = updateDate(state.value.date, action.payload) // calling updateDate function for updating date
        state.value = {...state.value, date: newDate} // updating state
    }
}

In above code we are checking if action.type is equal to 'updateDate' and if it is we are calling an updateDate function which updates date by increasing or decreasing depending on the value of direction which we passed in payload object of action. If value of direction is 'next-month' then updateDate function will increase date and if value is 'previous-month' then date will be decreased.

Lets implement updateDate function



const updateDate = (date, payload) => {
    const year = date.str.getFullYear()
    const month = date.str.getMonth() + 1
    let newDate = {}
    if(payload.direction === 'next-month') {
        newDate = increase(month, year)
    }
    else newDate = decrease(month, year)
    return newDate
}

updateDate function takes 2 parameters date and payload. date is current date which we will use to get the next date or previous date and payload is the object which we passed with action to dispatch and payload have a direction property which is used to decide whether to increase the date or decrease. First, we will get current year and month using getFullYear and getMonth methods on date.str and note that getMonth returns a month number from 0 to 11, 0 -> January & 11 -> December that is why we adding 1 to month. Then we check if direction equals to 'next-month' and if yes then we increase the date by calling increase funtion with current month and year as arguments else we decrease date by calling decrease in same way. And the result object returned by these function is store in newDate variable which is then returned.

As we can see that we are using increase and decrease functions inside updateDate which are responsible for increasing and decreasing date respectively. So, lets implement these functions.



const increase = (month, year) => {
    const obj = {}
    // checking month is not December👇🏻
    if(month !== 11){
        obj.str = new Date(`${year}-${month+1}`)
        obj.dateString = new Date(`${year}-${month+1}`).toDateString()
    }else{
        obj.str = new Date(`${year+1}-01`)
        obj.dateString = new Date(`${year+1}-01`).toDateString()
    }
    return obj
}
const decrease = (month, year) => {
    const obj = {}
    // checking month is not January👇🏻
    if(month !== 0){
        obj.str = new Date(`${year}-${month-1}`)
        obj.dateString = new Date(`${year}-${month-1}`).toDateString()
    }else{
        obj.str = new Date(`${year-1}-12`)
        obj.dateString = new Date(`${year-1}-12`).toDateString()
    }
    return obj
}

In increase function we are checking if month is not December and if it is not then we just have to increase month and year will be same but month is December then we have to increase year and change month to '01' and the result is stored in obj object which is then returned. And reverse happens in decrease function.

Now, when user clicks on any of the chevron it will update date correctly but we will not be able to see those changes on our screen because in Header.vue we are storing date in component level state known as current and this state do not know that date has updated so, whenever date updates we also have to update current for that we have to watch date object in global state so, lets do that using watch function.



<script setup>
    import { ref, inject, watch } from 'vue'
    import chev from '../assets/chev.svg'

    const MONTHS = {
        Jan: "January",
        Feb: "February",
        Mar: "March",
        Apr: "April",
        May: "May",
        Jun: "June",
        Jul: "July",
        Aug: "August",
        Sep: "September",
        Oct: "October",
        Nov: "November",
        Dec: "December"
    }
    const state = inject('store') // accessing state using inject function
    const [ _, month, __, year ] = state.value.date.dateString.split(' ') // extracting month & year from dateString
    const current = ref({
        month: MONTHS[month], // getting month fullname from MONTHS object using monts first 3 initials
        year
    })

    // watching date so that we can update current 👇🏻
    watch(()=>state.value.date, (updatedDate) => {
        const [ _, month, __, year ] = updatedDate.dateString.split(' ') // extracting updated month and year

        // updating current👇🏻
        current.value = {
            month: MONTHS[month],
            year
        }
    })
</script>

<template>
    <div class="header">
        <div class="info">
            <div class="year">
                <p>{{ current.year }}</p> <!-- Using year from current state above -->
            </div>
        </div>
        <div class="wrapper">
            <div class="left-chev chev">
            <img :src="chev" alt="left-chevron">
            </div>
            <div class="month">
                <h2>{{ current.month }}</h2> <!-- Using month from current state above -->
            </div>
            <div class="right-chev chev">
                <img :src="chev" alt="right-chevron">
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
    /* styling goes here */
</style>

watch function takes 2 arguments first argument is dependency state meaning what state we want to watch and second argument is a function which gets executed when dependency state changes this function takes a parameter which is updated version of dependency state.

Now, we can see the changes on screen

Now, lets add functionality to CalenderGrid.vue component. In this component we first have to render correct number of days for each month and then we have to make sure that each date falls under correct day in every month. E.g; In 01-february-2023 was 'wednesday' so, in calendar '1' should be under day 'wednesday'. If we dont arrange dates in each month in correct order then in every month '1' will fall under day 'sunday'.

To get the correct number of dates in each month we will create a state called dateGrid with initial value of empty array inside global reactive state in store.js. dateGrid array will be updated with current number of dates every time date changes by clicking on any chevrons in header. To update dateGrid we will create a function updateDateGrid which will update dateGrid whenever date changes.

store.js👇🏻



import { ref } from 'vue'
export const state = ref({
    date: {
        str: new Date(),
        dateString: new Date().toDateString()
    },
    dateGrid: []
})

export const dispatch = (action) => {
    // checking the type of action
    if(action.type === 'updateDate'){
        const newDate = updateDate(state.value.date, action.payload) // calling updateDate function for updating date
        state.value = {...state.value, date: newDate} // updating state
    }
}

Now, lets implement updateDateGrid function. This function recieves an argument which is current date object then we are extracting month name and year from dateString property of date object. After that we need to know number of days in current month for that we are using getNumberOfDays function and we are passing month name as an argument to this function. After recieving number of days in numberOfDays variable from getNumberOfDays function and then we are creating currentMonthDates array which will contain dates of current month. Each element in currentMonthDates array will be an object with three properties id, dt, day. dtis date from 1 to numberOfDays, day is simply day on particular date dt.



const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const updateDateGrid = date => {
    const [ _, monthName, __, year ] = date.dateString.split(' ') // extracting month name and year
    const numberOfDays = getNumberOfDays(monthName, year) // recieving number of days
    const currentMonthDates = [] // will contain dates of current month
    const monthNumber = date.str.getMonth() + 1 // current month number 1 - 12
    for(let i = 0; i < numberOfDays; i++){
        const item = {} // creating an object that will contain day & date
        const day = new Date(`${year}-${monthNumber}-${i+1}`).getDay() // getting day number 0 - 6
        item.id = i + 1
        item.dt = i + 1
        item.day = DAYS[day] // getting day from DAYS array
        currentMonthDates.push(item) // adding item object containing day and date to currentMonthDates array
    }
    return currentMonthDates
}

In above code you can see that we are using getNumberOfDays function which returns number of days in given month lets implement this function.



const getNumberOfDays = (month, year) => {
    const thirtyOneDays = ['Jan', 'Mar', 'May', 'Jul', 'Aug', 'Oct', 'Dec'] // months having 31 days
    if(thirtyOneDays.includes(month)) return 31
    else if(month === 'Feb') return isLeapYear(year) ? 29 : 28 // checking if year is a leap year
    return 30
}

First we are creating an array of months thirtyOneDays that have 31 days then we are checking that if the given month is in this array and if it is then we are returning 31 but if it is not in this array then we are checking that if month is February and if it is then we have to check that if the year is leap year or not if it is leap year then we are returning 29 else we are returning 28 but if month is not February then we return 30.

In above code we have used isLeapYear function which returns true if the year is a leap year else it returns false. Now, lets implement it.



const isLeapYear = year => {
    const firstCondition = year % 4 === 0 && year % 100 !== 0 // If a year is divisible by 4 and is not divisible by 100
    const secondCondition = year % 4 === 0 && year % 100 === 0 && year % 400 === 0 // If a year is divisible by 4 and 100 and 400
    if(firstCondition || secondCondition) return true
    return false
}

A year is leap if it specifies two condition:

If a year is divisible by 4 and is not divisible by 100.
If a year is divisible by 4 and 100 and 400.

Now, our calendar renders correct number of days for each month but there is still a problem which is that these days are not in correct order meaning the first date of every month comes under sunday as shown in picture above.

Now, lets arrange these dates in correct order and for that we will create a function which takes currentMonthDates as a parameter then it first checks the day on first date which it gets from first element of array. Then we will get index of that day from DAYS array which will let us know at which position we have to render the first date in our calendar. E.g: day on first date of February is Wednesday so the date 1 should be under W in calendar for that we will first get the index of Wed from DAYS array and the index is 3. So, we will prepend 3 empty objects in currentMonthDates array so that when we loop over currentMonthDates array it will render 3 empty objects which will leave first 3 blocks in calendar empty and the date 1 will be rendered on 4th block which is under W and all other dates automatically falls under correct day. And same process will be repeated for each month.

Lets implement this function



const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const arrangeGridAccordingToDays = currentMonthDates => {
    let newDateGrid = []
    const firstDay = DAYS.indexOf(currentMonthDates[0].day) // getting index of first day
    for(let i = 0; i <= firstDay; i++){
        if(i < firstDay){
            newDateGrid = [...newDateGrid, {
                id: Math.random(),
                dt: '', //  adding empty date value
                day: DAYS[i]
            }]
        }else{
            newDateGrid = [...newDateGrid, ...currentMonthDates]
        }
    }
    return newDateGrid
}

Now, use above function in updateDateGrid function.



const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const updateDateGrid = date => {
    const [ _, monthName, __, year ] = date.dateString.split(' ') // extracting month name and year
    const numberOfDays = getNumberOfDays(monthName, year) // recieving number of days
    const currentMonthDates = [] // will contain dates of current month
    const monthNumber = date.str.getMonth() + 1 // current month number 1 - 12
    for(let i = 0; i < numberOfDays; i++){
        const item = {} // creating an object that will contain day & date
        const day = new Date(`${year}-${monthNumber}-${i+1}`).getDay() // getting day number 0 - 6
        item.id = i + 1
        item.dt = i + 1
        item.day = DAYS[day] // getting day from DAYS array
        currentMonthDates.push(item) // adding item object containing day and date to currentMonthDates array
    }
    return arrangeGridAccordingToDays(currentMonthDates) // arranging dates in correct order
}

CalenderGrid.vue 👇🏻



<script setup>
    import { ref, computed, inject } from 'vue'

    const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    const {state, dispatch} = inject('store')
    const current = ref({
        currentDay: DAYS[new Date().getDay()],
        currentDate: new Date().getDate(),
        currentMonth: new Date().getMonth(),
        currentYear: new Date().getFullYear()
    })

    // Checking current month and year 👇🏻
    const isCurrentMonthAndYear = computed(() => (
        state.value.date.str.getMonth() === current.value.currentMonth && 
        state.value.date.str.getFullYear() === current.value.currentYear
    ))
</script>

<template>
    <div class="calender-grid">
        <div class="days-grid">
            <div
                v-for="day, index in DAYS"
                :key="index"
                :class="['day', {today: day === current.currentDay && isCurrentMonthAndYear}]"
                :title="day"
            >{{ day[0] }}</div>
        </div>
        <div class="date-grid">
            <div class="date"
                v-for="date in state.dateGrid" // Looping over dateGrid
                :key="date.id"
            >
                <div 
                    :class="['val', {today: date.dt === current.currentDate && isCurrentMonthAndYea}]" 
                    v-if="date.dt">
                    {{ date.dt }}
                </div>
                <div v-else>&#10060;</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
    .calender-grid{
        margin-top: 15px;
        display: grid;
        gap: 20px;
        user-select: none;
        .days-grid{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            justify-content: space-between;
            align-items: center;
            .day{
                text-align: center;
                font-weight: bold;
                &.today{
                    color: blueviolet;
                }
            }
        }
        .date-grid{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            justify-content: space-between;
            align-items: center;
            row-gap: 20px;
            .date{
                display: flex;
                justify-content: center;
                cursor: pointer;
                .val{
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 15px;
                    position: relative;
                    background-color: antiquewhite;
                    &.today{
                        color: blueviolet;
                        font-weight: bold;
                    }
                    &.event{
                        // border: 1px solid salmon;
                        background-color: antiquewhite;
                        font-weight: bold;
                        &::before{
                            content: '';
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background-color: salmon;
                            position: absolute;
                            top: 2px;
                            right: 2px;
                        }
                    }
                }
            }
        }
    }
</style>

And with that our basic calendar is ready.

Accordion in Vue

Owais Khan — Sun, 19 Feb 2023 05:13:54 +0000

Accordion

In this article we will be creating an accordion with vue.js. An accordion is used in websites mostly for FAQ section where answer section expands or collapses when user clicks on question itself or any icon like chevron🔰, arrow➡️ or plus sign➕.

Preview: live Demo

First, we will create vue project using vite. So, ensure that vite and node is already installed on your computer. After installing vite type following command in command prompt or terminal and press Enter:

    npm init vite <project-name>

After pressing Enter you will be prompted with few questions like which framework you want to use vite with we will choose vue and which language JavaScript or TypeScript we will choose JavaScript.

After answering above questions vite will create a vue project for us. After that we have to run few commands in terminal:

    cd <project-name>
    npm install // It will install all the necessary dependencies for our project in node_modules folder

We will be using LESS as css-preprocessor. So, lets install it.

    npm install -D less // installs less as dev-dependency

Once vite creates project for us we can run our project using command:

    npm run dev

Above command will start development server created by vite at http://localhost:5173/ and you will see a welcome page at this address.

Now, lets modify the project as per our need. First, delete HelloWorld component from src/components folder then boilerplate code inside src/App.vue file and also delete style.css file from src folder.
As we are going to use LESS as css-preprocessor, create a folder less and inside of the folder create global.less file and add this code in it:

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        font-family: 'Source Sans Pro', sans-serif;
        background-color: antiquewhite;
    }

In above code we are resetting the default browser styles and adding some general styles to body.

Open src/main.js and you will see something like this:

    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'

    createApp(App).mount('#app')

Replace ./style.css import with ./less/global.less because we deleted style.css file and created less/global.less file. After replacing main.js will look like this:

    import { createApp } from 'vue'
    import './less/global.less'
    import App from './App.vue'

    createApp(App).mount('#app')

Creating Accordion

First we will create Accordion.vue component in src/components folder and import that component in to our App.vue component.

Accordion.vue👇🏻

    <script setup></script>
    <template>
        <h1>Accordion</h1>
    </template>
    <style scoped lang="less"></style>

App.vue👇🏻

    <script setup>
        /* importing Accordion.vue👇🏻 */
        import Accordion from './components/Accordion'
    </script>
    <template>
        <Accordion/> <!-- 👈🏻Using Accordion.vue -->
    </template>

App.vue is the parent components of all other components in our app. This component is passed to createApp function provided by vue.js which translates our vue code into native JavaScript, HTML and CSS and then the translated code is passed to mount function which puts this translated code into an html element with id app inside index.html file which is then executed by browser. It is important to import other components in App.vue so that vue can translate the code in all of our components.

In src/components folder we created Accordion.vue component which houses all other components for our app. Currently, this component only contains a h1 tag with text 'Accordion'. So, if we run npm run dev in terminal and open browser we will see 'Accordion' text on our screen.

Now, let's create a main container for our accordion and the container is simply a html main element. And also give some styling to it. Inside main we will create a div with class faqs which will contain all of our accordion items.

    <script setup></script>
        <template>
            <main>  <!-- 👈🏻Main container for accordion -->
                <div class="faqs"></div>
            </main>
        </template>
    <style scoped lang="less">
        .main{
            width: 500px;
            box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.5);
            margin: 0 auto;
            margin-top: 10%;
            margin-bottom: 10%;
            background-color: rgb(240, 248, 255);
            padding: 10px;
            border-radius: 6px;
            .faqs{
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>

Now, we will create another component in src/component folder called Faq.vue in which we will write code for single accordion item. Our single accordion item will have a div element with class faq which contains two div elements with classes header and answer respectively. In header element we will create further two div elements with classes question and icon. question div will contain a faq-question and icon div contains a chevron image. And in answer element we have a p element which contains faq-answer.

Faq.vue👇🏻

    <script setup></script>
    <template>
        <div class="faq">
            <div class="header">
                <div class="question">
                    <!-- contains question -->
                </div>
                <div class="icon">
                    <img src="" alt=""/>
                </div>
            </div>
            <div class="answer">
                <p> <!-- contains answer --> </p>
            </div>
        </div>
    </template>
    <style scoped lang="less"></style>

Our accordion will have five questions in total and we will store those in an array of objects. Each object will have four properties:

id an unique number for identifying an object.
question stores faq question.
answer stores faq answer.
isOpen stores a boolean value which specifies whether answer part of accordion is expanded or collapsed.

    const data = [
        {
            "id": 1,
            "question": "What is the capital of Australia?",
            "answer": "The capital of Australia is Canberra. It is a relatively new city, established in 1913, and is located between Sydney and Melbourne. Canberra is home to numerous national institutions and landmarks, including Parliament House, the Australian War Memorial, and the National Gallery of Australia. The city is known for its modern architecture and urban planning, and has a population of over 400,000 people. Despite not being one of the country's largest cities, Canberra is an important political and cultural center, and has a significant impact on the nation's economy and development.",
            "isOpen": false
        },
        {
            "id": 2,
            "question": "What is the tallest animal on earth?",
            "answer": "The tallest animal on earth is the giraffe, which can grow up to 18 feet tall. Giraffes are known for their long necks, which can reach up to 6 feet in length, and are used to reach leaves and fruits from tall trees. Giraffes are found in savannas and grasslands in Africa, and are herbivorous, feeding on leaves, fruits, and flowers. Despite their size, giraffes are social animals and live in groups called towers. They are also known for their distinctive spotted coat, which helps them blend in with their environment and avoid predators.",
            "isOpen": false
        },
        {
            "id": 3,
            "question": "What is the largest country in the world by area?",
            "answer": "The largest country in the world by area is Russia, which covers over 17 million square kilometers. Russia is located in northern Eurasia, and is bordered by Norway, Finland, Estonia, Latvia, Lithuania, Poland, Belarus, Ukraine, Georgia, Azerbaijan, Kazakhstan, China, North Korea, and Mongolia. Russia has a population of over 144 million people, and is known for its rich history and culture, as well as its natural resources, such as oil, gas, and minerals. The country is also home to numerous landmarks and tourist attractions, including the Red Square, the Kremlin, and the Hermitage Museum.",
            "isOpen": false
        },
        {
            "id": 4,
            "question": "What is the largest animal on earth?",
            "answer": "The largest animal on earth is the blue whale, which can grow up to 100 feet in length and weigh up to 200 tons. Blue whales are found in all the world's oceans, and are known for their distinctive blue-gray coloration and long, slender bodies. They are filter feeders, feeding on tiny shrimp-like creatures called krill, and can consume up to 4 tons of krill in a single day. Despite their enormous size, blue whales are graceful swimmers and can travel at speeds of up to 30 miles per hour.",
            "isOpen": false
        },
        {
            "id": 5,
            "question": "What is the capital of France?",
            "answer": "The capital of France is Paris. It is one of the most famous cities in the world, known for its beautiful architecture, rich history, and world-class museums and landmarks. Paris is home to iconic landmarks such as the Eiffel Tower, the Louvre Museum, and Notre-Dame Cathedral, and is famous for its cuisine and fashion. The city has a population of over 2 million people, and is a global center for art, fashion, and culture. Despite its cosmopolitan character, Paris has retained much of its historic charm, with narrow streets",
            "isOpen": false
        }
  ]

In Accordion.vue we will store above array as a reactive state using ref so import ref from vue. Currently, our questions and answers are in an array but to display them on browser we have to extract those from array and put them into html elements. We have already created a component for that which is Faq.vue so import it. Faq.vue is a component for single accordion or single question & answer so, we have to pass a single object from data array to the component at a time. We have total five questions & answers which means we have to call Faq.vue five times and pass a single object of question & answer each time. Calling Faq.vue five times is tedious so we will us v-for directive on Faq.vue to loop over data array and in each iteration we will pass single faq object to the component.

    <script setup>
        import { ref } from 'vue'
        import Faq from './Faq'

        const faqs = ref(data) // data is above array of faq questions & answers
    </script>
        <template>
            <main>  <!-- 👈🏻Main container for accordion -->
                <div class="faqs">
                    <!-- Looping over faqs array and passing single faq as a prop -->
                    <Faq
                        v-for="faq in faqs"
                        :key="faq.id"
                        :faq="faq"
                    />
                </div>
            </main>
        </template>
    <style scoped lang="less">
        .main{
            width: 500px;
            box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.5);
            margin: 0 auto;
            margin-top: 10%;
            margin-bottom: 10%;
            background-color: rgb(240, 248, 255);
            padding: 10px;
            border-radius: 6px;
            .faqs{
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>

After passing faq as a prop we have to recieve that inside of Faq.vue using defineProps macro. Then we can use faq object in template of Faq.vue to extract question & answer from it. We also need a chevron icon in each accordion so, let's import that and bind the src attribute of img element to it.
At the end lets add some styling to the component.

    <script setup>
        import chevron from '../assets/chevron.svg'
        defineProps(['faq']) // recieving faq object as a prop.
    </script>
    <template>
        <div class="faq">
            <div class="header">
                <div class="question">
                    {{ faq.question }} <!--Extracting question from faq prop -->
                </div>
                <div class="icon">
                    <img :src="chevron" alt="chevron-icon"/>
                </div>
            </div>
            <div class="answer">
                <p> {{ faq.answer }} </p> <!--Extracting answer from faq prop -->
            </div>
        </div>
    </template>
    <style scoped lang="less">
        .faq{
            flex-grow: 1;
            .header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 2px solid antiquewhite;
                padding: 10px;
                border-radius: 6px 6px 0 0;
                cursor: pointer;
                .question{
                    font-weight: 700;
                }
                .icon{
                    width: 30px;
                    height: 30px;
                    transition: transform .5s;
                    img{
                        width: 100%;
                        height: auto;
                    }
                    &.open{
                        transform: rotate(180deg);
                    }
                }
            }
            .answer{
                height: 0;
                overflow-y: scroll;
                line-height: 1.5;
                background-color: antiquewhite;
                transition: height .5s;
                &::-webkit-scrollbar{
                    width: 5px;
                }
                &::-webkit-scrollbar-track{
                    appearance: none;
                    background-color: transparent;
                }
                &::-webkit-scrollbar-thumb{
                    width: 5px;
                    background-color: rgb(232, 210, 182);
                    border-radius: 50px;
                }
                p{
                    padding: 10px;
                }
                &.open{
                    height: 200px;
                }
            }
        }
    </style>

By default answer part of each accordion should be collapsed and we did it in css by giving .answer element height of 0 and setting overflow to scroll so that we can have scroll-bar on .answer if the content is long and it overflows. We also gave some styling to the scroll-bar also.

Adding Functionality

Whenever user clicks on a question or chevron icon it should toggle the answer part of that accordion meaning if answer part is collapsed it should expand and vice-versa. One thing to keep in mind is that click event will occur in Faq.vue component but the data that has to be updated is in Accordion.vue.Because Faq.vue is child component of Accordion.vue we can emit the event from Faq.vue and then listen to that emit event in Accordion.vue. Another thing is that we have to keep track whether the answer part of particular accordion is collapsed or expanded for that we will use isOpen property of faq object in data array.

    <script setup>
        import chevron from '../assets/chevron.svg'
        defineProps(['faq']) // recieving faq object as a prop.
        const emit = defineEmits(['toggleAnswer']) // defining events to emit
        const handleClick = id => emit('toggleAnswer', id) // emitting toggleAnswer event with id attribute.
    </script>
    <template>
        <div class="faq">
            <div class="header" @click="() => handleClick(faq.id)">
                <div class="question">
                    {{ faq.question }} <!--Extracting question from faq prop -->
                </div>
                <div :class="['icon', {open: faq.isOpen}]">
                    <img :src="chevron" alt="chevron-icon"/>
                </div>
            </div>
            <div :class="['answer', {open: faq.isOpen}]">
                <p> {{ faq.answer }} </p> <!--Extracting answer from faq prop -->
            </div>
        </div>
    </template>
    <style scoped lang="less">
        /* Styling goes here */
    </style>

First in Faq.vue we will add click event listener to header element which contains question and chevron icon. When user clicks on header it runs handleClick functions which emits toggleAnswer event to its parent component but to keep track of which accordion has been clicked we also send id of that faq object. Also, in template we are checking if faq.isOpen is true and if it is true then we are adding open class to answer element so that we can expand the answer part of accordion and also we are adding open class to icon element which contains chevron icon because we need to rotate it if faq.isOpen is true.

    <script setup>
        import { ref } from 'vue'
        import Faq from './Faq'

        const faqs = ref(data) // data is above array of faq questions & answers

        const toggleAnswer = id => {
            faqs.value = faqs.value.map(faq => faq.id === id ? {...faq, isOpen: !faq.isOpen} : faq)
        }
    </script>
    <template>
        <main>  <!-- 👈🏻Main container for accordion -->
            <div class="faqs">
                <!-- Looping over faqs array and passing single faq as a prop -->
                <Faq
                    v-for="faq in faqs"
                    :key="faq.id"
                    :faq="faq"
                    @toggle-answer="toggleAnswer"
                />
            </div>
        </main>
    </template>
    <style scoped lang="less">
        /* Styling goes here */
    </style>

In Accordion.vue we are listening to toggle-answer which executes toggleAnswer function which takes id as a parameter sent by Faq.vue. In toggleAnswer function we are updating faqs state by looping over faqs array using map function. Inside map function in each iteration we are checking if id of current item is equal to the id of clicked accordion and if it returns true that means current item is the accordion that was clicked so we are changing its isOpen property to true if it is false and vice-versa.

Another thing that we want in our Accordion is that at one time only one accordion item should have expanded answer part. So, if user clicks on some accordion to expand its answer part then answer parts of other accordion items should get collapsed if they are expanded. For that we first have to set isOpen property of each accordion whose isOpen property is true to false except the one user just clicked by doing this we will make sure that every other accordion have collapsed answer part.

In Accordion.vue

    const toggleAnswer = id => {
        faqs.value = faqs.value.map(faq => faq.isOpen && faq.id !== id ? {...faq, isOpen: false} : faq)
        faqs.value = faqs.value.map(faq => faq.id === id ? {...faq, isOpen: !faq.isOpen} : faq)
    }

I hope you enjoyed this article😊.

Objects in JavaScript

Owais Khan — Mon, 14 Feb 2022 12:44:42 +0000

Object in javascript is data structure used to hold key value pairs.
E.g; If we have data about book and we want to store it in a way so that we can access it easily. For that we can create object like below:

let book = {
  name: "Harry Potter",
  author: "JK Rowling"
}

Here I created an object book with two properties name and author. Properties in objects are like variables to which we assign values. In above example nameand author are keys and "Harry Potter" and "JK Rowling" are values respectively.

To access the properties of object we can use one of two methods:

Dot Operator.
Bracket syntax.

To access with dot operator we just have to write:

book.name // Harry Potter

with bracket syntax:

book["name"] // Harry Potter

In case of dot operator it is important to note that properties should be declared in the same way as variable which means properties should start with letters or underscore and not with numbers or special characters.

let x = {
  1name: "john" // cannot be accessed with dot operator
}
console.log(x.1name); // throws error

But in bracket syntax we can do something like this:

let x = {
  "1name": "john" 
}
console.log(x["1name"]); // john

We can also define methods in objects. Functions inside object are known as Methods. If we have define a method inside our book object:

let book = {
  name: "Harry Potter",
  author: "JK Rowling",
  sayHi: function(){
   console.log("Hi...")
 }
}

In above example we created sayHi method. We can access this method like:

book.sayHi(); // Hi...

Other handy way of defining methods inside objects:

let book = {
  name: "Harry Potter",
  author: "JK Rowling",
  sayHi(){
   console.log("Hi...")
 }
}

Now, this method looks better.

If we want to access object properties inside object methods, we can access them with thiskeyword. In objects this keyword refers to that object in which that method resides.
E.g:

let book = {
  name: "Harry Potter",
  author: "JK Rowling",
  sayHi(){
   console.log(`${this.name} is written by ${this.author}.`)
 }
}
sayHi(); // Harry Potter is written by JK Rowling.

In above example this keyword refer to book object. So, this.name is like saying book.name.