In this article, I will explain some properties used in CSS.

1- Display: flex;

A Flexible Layout must have a parent element with the display property set to flex.(1)

Direct child elements(s) of the flexible container automatically becomes flexible items.(1)

https://www.shutterstock.com/image-vector/shop-icon-store-230619400

Store in Vue.js is a container and holds state. If you are familiar with React-Redux, store basically works in a similar way that you whatever you stored in store container you could be able to use this store’s element in every component or container that we make for our app and this functionality gives us easiness to carry over a state’s part that we need more than one component. It is like real store that more that one people go in to store and get what they need.

Let’s explain store concept with an example;

In My store index, I…

Nuxt.js gives us very powerful feature that we don’t have to do routing for pages. Nuxt.js does page routing for us.

Let’s do pages with the example;

Nuxt.js gives us two different way to fetch data from an Api, one is Fetch hook, the other one is Async Data.

1-) Fetch Hook

fetch hook allows us to fetch data from any component. We could be able to use fetch hook with any component we want.

in the original document, it shows how to fetch data in the below.


<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
}
}
</script>

Let’s adjust this to in our example;

I have Reviews component and I…

v-for renders a list of items in vue.js, it is like using forEach in React.js, or using .map in ruby.

in the below code, that is how we type it.

v-for="item in items" 

“item in items” accepts each individual part as an item in an array which we called here items.

So, as an example

items= [orange, strawberry, mango, kiwi, apple], each individual here is item.

Let’s use v-for in real example, in my pages folder , I have index.vue file , and inside this LargeCardDisplay component, and I’m using v-for inside of this component. …

Parameter is a keyword that we use when we define a method in Ruby. Simply, in below example; name in parentheses is a parameter. Parameter could be anything, it could be a hash, it could be an array, string, number. We could add as many parameters as we want. We use parameters because we need to pass some data to our defined method.

Like here, I need to add a name to run this function properly and dynamically. So that I could be able to change this name with another name that whatever I want if I need to run…

Adding pagination to any web site can be a challenge. While I was working on a small project I needed to have a pagination. So pagination took my time and I want to share my knowledge that you could get something from here.

Eventually, we will built something like this in below picture.

First of all, where ever we want to put this pagination, we could place this pagination with absolute and insert-y, or x coordinates, and give direction with bottom, or top. important thing here is absolute keyword, we need to use this keyword to place in the web…

Tailwind CSS is based on utility which means that uses classes to define CSS. For example; below example, we have width, hight, color, all inside with in a class, so this is how Tailwind CSS work, and it is called utility-first framework.

class=”w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"in Tailwind CSS, we use low level staff, above example, w-width, h-height, or max, min, something like that.

Also, Tailwind CSS is custom CSS, if you are familiar with bootstrap, bootstrap uses components to gave shape to their staff, but in tailwind CSS everything is more custom, we do it by ourselves by adding…

Props are arguments passed into React components. in React, we use props transferring data from parent component to child component. Sometimes, we need to pass data from parent to grandchild component and we have to write down props in every step of component until we rich to grandchild component as we need to, if we have three levels deep from parent to child, that will be a lot of writing props.

There are ways to not transferring data step by step, instead directly to grandchild component. one way is React-Redux, which is a way to create a store and collecting…

Vue components have a $emit() function that allows you to pass custom events up the component tree.(1)

generally, emit function notifies parent component that something has changed in child component.

I will deep into emit function with an example.

I have a child component as <SearchJokes /> . It is a component that filters the jokes as whatever typed as input. The jokes are just a big array that has all the common jokes in there.

Yahya Gok

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store