Forem: Ayoazeez26

Using vue-clickaway for your dropdowns

Ayoazeez26 — Thu, 05 Jan 2023 00:45:16 +0000

Do you ever want to close a dropdown anytime the user clicks outside of it? vue-clickaway is a package that covers listening for clicks outside an element so you can perform actions when it happens. I will be taking you on the easy installation process and how to use it within your components.

PREREQUISITE

Knowledge of Vue or Nuxt
Install vue-clickaway

Click here to install the package via npm or yarn. After installing, the recommended way of usage is to import clickaway into the component you intend to use it as a mixin like this:

import { mixin as clickaway } from 'vue-clickaway';

The next step is to call the mixin inside your

export default like this mixins: [ clickaway ]

After that, you call the method you want to trigger on clickaway in your template on your dropdown parent element.

v-on-clickaway="away"

Final step is to create the away function and watch the magic happen. Let's go ahead to demonstrate an example for you so you can understand how it works, if you don't already.

This example was built on a Nuxt.js project. The first thing I did after installing clickaway was to create it as a plugin so I would not have to import it and use it as a mixin on every component I intend to use it on

// plugins/clickaway.js

import { mixin as clickaway } from 'vue-clickaway'
import Vue from 'vue'

Vue.mixin({
  mixins: [clickaway]
})

Now add the clickaway file inside the plugins array in your nuxt.config.js

// nuxt.config.js

plugins: [ '~/plugins/clickaway' ],

Now we can go ahead to call our method on the clickaway directive

// components/Navbar.vue
<script>
  export default {
    data: () => ({
      showCityDrop: true,
      cityDrop: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]
    }),
    methods: {
      closeCityDrop () {
        this.showCityDrop = false;
      }
    }
  }
</script>

<template>
  <div v-if="showCityDrop" v-on-clickaway="closeCityDrop">
    <p v-for="item in cityDrop" :key="index" :to="item.to" class="drop flex items-start text-primary mb-4">
      {{ item }}
    </p>
  </div>
</template>

And that's all you need to do to use clickaway to close your dropdown when the user clicks outside of it. It has other use cases aside the use case demonstrated above. You can use vue clickaway whenever you need to listen outside of an element to perform actions.

I hope you find this helpful

What are topics a Junior Vue Developer can write about

Ayoazeez26 — Sun, 13 Nov 2022 01:25:54 +0000

This is a question I have been pondering on subconsciously for a while now. I would love topic suggestions on what I could write about as a Junior Vuejs developer with over 2 years experience writing Vue. I have a goal of increasing the rate at which I write articles and this would help a lot. Thanks

I used the SPREAD OPERATOR for the first time 🤯🤯

Ayoazeez26 — Wed, 19 May 2021 13:30:00 +0000

What is a spread operator?

The spread operator is used when all elements of an iterable variable such as an object or an array needs to be included in some sort of a list. This has a lot of use cases, below is a basic description of what using the spread operator looks like:

I was recently consuming API endpoints and I came across an endpoint whose response is an array of arrays and each array item contains several objects which I needed to get. First instance was to do a forEach() to loop through each arrays. Then I proceeded to do another forEach() to get to the individual objects of each of the arrays. All was going fine until I decided to render those items to the DOM and it turns out only the last array of objects was getting rendered. This was a point of confusion because everything seems to be working fine. After a lot of trying to figure things out, I decided to use a spread operator after the first forEach loop to push each item in each of the arrays to an empty array. This makes it that all objects are in a single array

Centering content in the middle of a page

Ayoazeez26 — Tue, 30 Mar 2021 23:22:37 +0000

Have you ever needed to center an element to the middle of a page? I would proceed to explain the simple way you can achieve that :)

The image above was gotten from a chellenge on Frontend Mentors where you sign up and take challenges and try to make your solution look as close to the design as possible.

As you can see from the image above, the container of the whole content is centered in the page. This is what my solution currently looks like

As you can see, it's perfect with the exception of the container being in the center of the page. We will proceed to make it centered now.

Setting the position of the container to absolute takes it out of the flow of the document. Next thing to do is to set the top and left properties to 50% each.

The reason we did that was to set the container to 50% from the top of the page and 50% from the left. Our container now looks like this

what actually happens here is that the origin of the container is its top left position, looking objectively at our solution would show you that the top left corner of our container is actually at the center of the page.

To make our container body appear at the body instead of just the top-left corner, we add a final style property.

What the transform translate property does is to move the container and in general, it acts relative to the body of the container so the (-50%,-50%) moves the container backwards half of it's width and height, so originally if we had our width set to 600px, -50% moves it backward 300px and same goes for the height.

Our container should now look like this

So, with just 4 style properties, we were able to style our container and center it on our page. I hope you have a better understanding of how centering an element works now.

Here's a link to the github repo

My Cry for Help

Ayoazeez26 — Mon, 13 Jul 2020 12:38:01 +0000

Hey guys, so I'm on Hackerrank and I decided to take on their 30 days of code challenge and lo and behold, I get stuck on day 1, so so frustrating. I decided to leave it for a while and came back to it after a few weeks but still with no positive results, so this is my cry for help for anyone willing to assist me in passing through day 1. Thank you in anticipation

The CSS :not() Selector

Ayoazeez26 — Fri, 26 Jun 2020 07:05:42 +0000

I stumbled upon this selector in CSS recently and I did a little reading on it and found its use cases very interesting so I decided to share it.

The :not() CSS selector has a wide range of use cases.

Use Cases

The general idea behind it's use case is to prevent certain items from being selected, hence it is known as the negation pseudo-class.

Using this saves you time and more lines of code, as in this case you would have had to give the remaining p tags a specific class name and apply the style to that class.

Linking :not() with other pseudo selectors

This selector can also be used together with other pseudo-class and pseudo-element selectors. For example, the following will add a box shadow and a background color to all buttons that do not contain the plump class when they are being hovered on.

Using :not() globally

You can also use the tag :not() selector globally in the sense that you are not applying it to an element so it selects all elements in the document except the ones specified in the brackets

The CSS style above styles the color of every element in the document except the buttons.
Another example of the :not() Selector use case is this:

More Examples

The above example will style all input text fields that are not disabled.
I hope you understand the basics and the general idea behind this awesome CSS Selector.

Resources for more insights

For further insights on the :not() Selector, I would recommend you check:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://tympanus.net/codrops/css_reference/not/