DEV Community: Tiamiyu Sikiru Abidemi

Day 1 all over again

Tiamiyu Sikiru Abidemi — Thu, 11 Dec 2025 21:58:16 +0000

I used to love writing and writing lyrics, time I was interested in being a rapper, had 3 tracks (interesting time), before programming took the center stage.

Solid prospect, I want it back.

I’m going to be writing more, it makes me feel less burdened; pour my heart and soul out. Not random stuffs, I will be doing more of day to day activities updates and technical writing.

Definitely getting my MOJO back!!!

Day 1 all over again.

Building Gemini AI with Vue3: A Comprehensive Guide

Tiamiyu Sikiru Abidemi — Mon, 11 Mar 2024 12:54:05 +0000

Building Gemini AI with Vue3: A Comprehensive Guide

Introduction

Gemini AI is a powerful open-source chatbot framework that enables developers to create intelligent and interactive conversational interfaces. This guide will provide a comprehensive overview of how to build a Gemini AI bot using Vue, a popular JavaScript framework for building reactive user interfaces and Gemini API.

Prerequisites

Basic knowledge of Vue and JavaScript

Gemini AI Common use cases

Gemini API has different model for different implementations:

Generate text from text-only input
Generate text from text-and-image input (multimodal)
Build multi-turn conversations (chat)

The generate text from text-only input is the implementation we'll be working on in the first part of this article.

Step 1: Create a new Vue project

Let's create a new Vue project using the following command:
vue create gemini-vue-web-app

Step 2: Install Gemini AI

Install the Gemini AI library using npm:
npm i @google/generative-ai

Step 3: Creating Gemini API key

To use the Gemini API, you'll need an API key. If you don't already have one, create a key in Google AI Studio.
Get an API key

We'll be needing two components which are:

GeminiAI - which will house our question form field and also our AIAnswer component.
AIAnswer - this is where our answer will be rendered. Nothing to serious here. Smiles.

GeminiAI component

<template>
  <h1 class="mb-5">Hello i'm Gemini AI, ask me anything</h1>

  <form class="mb-5" @submit.prevent="fetchAnswer">
    <div>
      <textarea name="question" id="question" cols="30" rows="10" v-model="question"></textarea>
    </div>
    <button type="submit" :disabled="!question">
      {{ `${isLoading ? 'asking gemini...' : 'Ask'}` }}
    </button>
  </form>

  <div class="mb-10">
    <AIAnswer :answer="answer" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useGetGenerativeModelGP } from '../composables/useGetGenerativeModelGP.js'
import AIAnswer from '../components/AIAnswer.vue'

const question = ref('')
const answer = ref('')
const isLoading = ref(false)

const fetchAnswer = async () => {
  answer.value = ''
  isLoading.value = true

  try {
    answer.value = await useGetGenerativeModelGP(question.value)
  } catch (error) {
    console.log({ error })
  } finally {
    isLoading.value = false
    question.value = ''
  }
}
</script>

<style lang="scss" scoped>
.mb-5 {
  margin-bottom: 5rem;
}
.mb-10 {
  margin-bottom: 10rem;
}
</style>

Let's breakdown the GeminiAI component:

Inside our template tag we have 3 direct children elements, which are: h1, form and a div that has AIAnswer component as a child.
AIAnswer Component

<template>
    <div>
        <p v-if="answer">{{ answer }}</p>
    </div>
</template>

<script setup>
    defineProps({
        answer: {
            type: String,
            default: "Answer will be displayed here."
        }
    })
</script>

script tag - we are buiding with vue composition api so our script tag will take a setup attribute.

We are importing ref from vue, useGetGenerativeModelGP composable (which we'll talk about later) from our composables folder and lastly our AIAnswer component.
We have 3 reactive states and a function - question, answer, isLoading and fetchAnswer.

fetchAnswer function - Our function when called, call the useGetGenerativeModelGP composable
useGetGenerativeModelGP is an exported function

import {useGenAi} from './useGenAi.js'

export const useGetGenerativeModelGP = async (prompt) => {

    const model = await useGenAi('gemini-pro');
    const result = await model.generateContent(prompt);
    const response = await result.response;
    const text = response.text();

    return text;
}

where we are importing another composable named useGenAi, vue allows us to import composables in a composable file so we are taking advantage of that.

Here is what our useGenAi file looks like

import { GoogleGenerativeAI } from '@google/generative-ai'

export const useGenAi = async (modelType) => {
  const VITE_GOOGLE_AI_STUDIO_API_KEY = import.meta.env.VITE_GOOGLE_AI_STUDIO_API_KEY

  const genAI = new GoogleGenerativeAI(VITE_GOOGLE_AI_STUDIO_API_KEY)
  const model = genAI.getGenerativeModel({ model: modelType })

  return model
}

we import GoogleGenerativeAI we installed earlier, create a useGenAi function that takes modelType parameter.

Inside our useGenAi function we have, VITE_GOOGLE_AI_STUDIO_API_KEY variable where we assigned our generated API KEY to.

Note: we created a .env file in our root folder, where we stored our API Key and value.

genAI variable where we are calling a new GoogleGenerativeAI object with our API KEY. Our model call, genAI.getGenerativeModel. Then we return model.

Back to our useGetGenerativeModelGP , we have variables namely:
model - awaiting the useGenAi call response, the useGenAi takes in an argument gemini-pro which is our type of Gen AI model.
result - awaiting the model.generateContent(prompt) response, the prompt we are passing as an arguement is the text our users will input.
response - also awaits result.response and text - where we assign our text function call from the response variable.

Then finally we return text, which is the answer our users will be seeing.

Step 4: App.vue file

Create Render Template

<script setup>
import GeminiAI from './components/GeminiAI.vue';
</script>

<template>
  <main>
      <GeminiAI />
  </main>
</template>

Step 5: Run the Application Run the Vue application using the following command:

 npm run dev

Github Repo
Live Demo

Conclusion:

By following the steps outlined in this guide, you have successfully built a basic Gemini AI text prompt with Vue 3. Gemini AI provides a powerful platform for creating intelligent conversational interfaces that can engage users and provide valuable assistance.

Form and Form Validation in React using Formik and Yup

Tiamiyu Sikiru Abidemi — Thu, 13 Oct 2022 17:24:02 +0000

As a frontend and software engineer in general, security is one of the key concerns when building web applications, second only to performance. So taking time to prevent external form abuse by malicious users is never a wasted effort.
We'll be working through form valiadation and form in React by building a contact form, using Yup and Formik.

Prerequisites

Before you begin this tutorial you'll need the following:

- React knowledge

Yup Installed
Formik Installed

Installing React

setting up our project

 npx create-react-app yup-formik-validation
 cd yup-formik-validation
 yarn start

Formik

Formik is a library that manages form values(datas),validation and error messages, and handling of form submission. Making interacting with form as easy as a walk in the park.

Installing Formik

yarn add formik

Yup

Yup is a JavaScript schema builder for value parsing and validations.

Installing Yup

 yarn add yup

Initialize Module

After all installation we'll be working inside our App.js file.

> app.js
import React, { useState } from 'react';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';

Our next line of action is setting up our Form and form fields using Formik, we'll be working on 4 fields namely:

First Name Field
Last Name Field
Email Field
Message Field (using textarea element)

Before we move forward lets talk about formik element and some of it attributes.
Formik element housing both Form element and it child element (Field elements).

  <Formik>
    <Form>
      <Field></Field>
   </Form>
    ...
  </Formik>

Formik element also have some attributes that are required when setting up a form. Listed below:

InitialValues : it's contains the initial values of our fields element.

initialValues={{
   firstName: '',
   lastName: '',
   email: '',
   message: ''
}}

ValidationSchema : houses our Yup validation schema, which we'll be talking about below.

> // declared outside of our App function.
const validationSampleSchema = Yup.object().shape({
   firstName: Yup.string().min(1, 'First Name is too 
      short!').required('First Name field is required'),
   lastName: Yup.string().min(1, 'Last Name is too 
      short!').required('Last Name field is required'),
   email: Yup.string().email('Invalid email').required('Email 
      field is required'),
   message: Yup.string().required('Message field is required')
})

Yup has different data type methods validation and conditions methods e.g min() and required()

validationSchema={customValidationSchema}

passing of our custom schema to the validationSchema attribute

onSubmit : submission function, which is an eventListener.

onSubmit={(values, { setSubmitting, resetForm }) => {
  // when the handleSubmit is triggered on our submit button 
     below, every expressions and method actions get triggered

  // Reseting our form fields to empty
     resetForm({ values: "" });
}}

Rendering our Form and making Formik props and methods available

{(
  {
    setFieldValue,
    values,
    errors,
    touched,
    handleSubmit
  }) => (
     <>
       <form></form>
     <>
)}

<form>
   <div className='row'>
      <div className='col-md-6'>
         <div className="form-group mb-3">
            <label>First Name</label>
            <Field className="form-control" name="firstName" 
              value={values.firstName} placeholder="First 
              Name"/>
            {errors.firstName && touched.firstName && (<small 
            className="text-danger">{errors.firstName} 
            </small>)}
        </div>
      </div>
      <div className='col-md-6'>
         <div className="form-group mb-3">
            <label>Last Name</label>
            <Field name="lastName" className="form-control" 
             value={values.lastName} placeholder="Last Name" 
            />
            {errors.lastName && touched.lastName && (<small 
             className="text-danger">{errors.lastName} 
             </small>)}
         </div>
      </div>
      <div className='col-md-12'>
         <div className="form-group mb-3">
            <label>Email</label>
            <Field type="email" className="form-control" 
              value={values.email} name="email" 
              placeholder="Email" />
            {errors.email && touched.email && (<small 
             className="text-danger">{errors.email}</small>)}
          </div>
       </div>
       <div className="col-md-12">
          <div className="form-group mb-3">
            <label>Drop Message</label>
            <Field name="message">
                  {({
                      field,
                      meta,
                  }) => (
                 <div>
                   <textarea className="form-control" 
                    name="message" id="message"
                    placeholder="Type here" value= 
                    {values.message} rows="3" {...field} > 
                  </textarea>
                  {meta.touched && meta.error && ( <small 
                  className="text-danger">{meta.error}
                  </small>)}
                </div>
                )}
            </Field>
         </div>
       </div>
    </div>
    <button type="submit" className='btn btn-sm btn-success' 
     onClick={handleSubmit}>Submit</button>
 </form>

two Field attributes are important to us, in our above code:

name: automatically hook up inputs to Formik using the name attribute to match up with Formik state. <Field name={'email'}/> name attribute matches the property declared in our initialValues.

value: Formik access the value through the value attribute value={values.fieldName} e.g value={values.email}

Errors

{errors.firstName && touched.firstName && (<small className="text-danger">{errors.firstName}</small>)}

whenever our field has been touched, and it contains an error, display it.
The error setup above works with our firstName field.

Submit

<button type="submit" className='btn btn-sm btn-success' 
  onClick={handleSubmit}>Submit</button>

onClick eventlistener triggers our handleSubmit (Formik method), which is available to us when we rendered our form.

Updated onSubmit Formik attribute

onSubmit={(values, { setSubmitting, resetForm }) => {

  // assigning our values from the fields to payload variable.   
  const payload = values;

  // we have a handleNext function that saves our contact form 
     field values into a result state.
  handleNext(payload);

  // Reseting our form fields to empty
  resetForm({ values: "" });
}}

const [showResult, setShowResult] = useState(false);
const [result, setResult] = useState({});

const handleNext = (payload) => {
    setResult(payload)
    setShowResult(true);
}

Yup Formik Validation Contact From End Result

Demo
Yup Formik Validation Contact Form Demo

Conclusion

Working with form in react is very tasking, coupled with trying to setup validation to our form fields, as we all know Form Validation is an integral part of building a web application, and Formik helps in working with forms in React doing the hard part and leaving us to worry more on other important part in our web app development, same way Yup handles our validations.

Check out the following official documentations to get a broader explanations on our subject matter:

Formik
Yup

You can also find the full code source on github:

Yup Formik Validation In React

Attributions

Formik
Yup

Have questions? Facing issues implementing?

Drop a comment let work through them together.

Do you find this helpful?

You can follow me here on Dev and also on Twitter:

Abidemi Tiamiyu

Vuex Pratical Implementation In Nuxt

Tiamiyu Sikiru Abidemi — Sat, 15 Jan 2022 23:04:39 +0000

INTRODUCTION

In this post we'll be looking into practical ways of working with Vuex in Nuxt, and setting up nuxt project.

NUXT INSTALLATION

We have different ways of setting up Nuxt project

Using create-nuxt-app
Manual Installation

to move quickly use create-nuxt-app, to get started:

// Yarn
yarn create nuxt-app <project-name>

// Npm
npm init nuxt-app <project-name>

//Npx
npx create-nuxt-app <project-name>

questions on tools and packages will be asked after answering all, dependencies will be installed then you can do the following:

// yarn
cd <project-name>
yarn dev

//npm
cd <project-name>
npm run dev

for more info on the installation process checkout the Nuxt official Docs Nuxt Installation

SETTING UP VUEX IN NUXT

Before we move further we've different ways to setup vuex in Nuxt Checkout Josh Deltener 4 Ways To Setup Vuex in Nuxt.

Going further we'll be working with the third method from Josh Deltene's Four ways to setup Vuex in NUXT which is Namespaced, one file.

Namespaced, one file: Inside our store directory we'll be having a unique state feature named file for example: auth.js, cart.js, payment.js and order.js inside where we'll be having our state, actions, mutations and getters which will be exported.

export const state = () => ({
})

export const mutations = {
}

export const actions = {
}

export const getters = {
}

SETTING UP state, actions, mutation and getters

Inside our namespaced file we'll create our state which should always be a function.

// State
export const state = () => ({
  paymentMethods: [],
})

Mutations, actions and getters will be exported as an object


// Mutation
export const mutations = {
  SET_PAYMENT_METHODS(state, payload) {
    state.paymentMethods = payload
  },
}

// Action
export const actions = {
  async fetchPaymentMethods({commit}) {
    try {
      let response = await pay(this.$axios).fetchPaymentMethods()
      // we commit the incoming data so as to update the state data
      commit('SET_PAYMENT_METHODS', response.data.data)
    } catch (error) {
    }
  },
}

// Getter
export const getters = {
  getPaymentMethods: (state) => state.paymentMethods,
}

ACCESSING STORE DATA IN OUR COMPONENT
Firstly to access store data in our component we need to import vuex inside the script tag

<script>
import {mapGetters} from "vuex"
</script>

to access a data from the store state or getter we'll do the following in our computed property

computed: {
// getters
    ...mapGetters({
      // getPaymentMethods we created in the getter above
      paymentMethods: 'payment/getPaymentMethods',
    }),

// state
     paymentMethods(){
        return this.$store.state.payment.paymentMethods
     }
  },

** EXECUTING ACTIONS AND MUTATIONS**

this.$store.dispatch('payment/fetchPaymentMethods')

this.$store.commit('payment/SET_PAYMENT_METHODS')

** SUMMARY **

So far, we've seen practical examples of how to setup Nuxt project, work with vuex in our Nuxt project and enjoy the out of box vuex setup.

We still have some other interesting features which we'll be sharing together, stick around for more.

I hope you find this post helpful and if you do, you can follow me on Twitter

Using vue-awesome-swiper in a Nuxt Project

Tiamiyu Sikiru Abidemi — Wed, 20 Jan 2021 14:34:03 +0000

Take Home from this Article?

This article will take you through the step by step guide of setting up vue-awesome-swiper in a nuxt project, how to add custom styling to vue-awesome-swiper and responsiveness.

What's vue-awesome-swiper?

vue-awesome-swiper is a slider component built with vue and makes setting up a slider easier on frameworks such as Vue and Nuxt.
Built By: Surmon China
Url: vue-awesome-swiper

Let's get Started

install vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

yarn add swiper vue-awesome-swiper

Next
Create vue-awesome-swiper.js file in the Plugin Folder
inside the vue-awesome-swiper.js file add

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';

// import custom style
import '@/assets/css/swiper.css';

Vue.use(VueAwesomeSwiper);

Add vue-awesome-swiper source to the plugins array in nuxt.config.js file

plugins: [
    { src: '@/plugins/vue-awesome-swiper', mode: 'client' }
  ],

Let's Create a Slider Component inside our Components Folder and Add the following Code

<template>
  <div v-swiper="swiperOption" class="w-5/6 ml-auto relative" :loadtheme="false">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <!-- Render original HTML in server, render Swiper in browser (client) -->
        <img class="h-64 w-64" :src="banner" />

      </div>
    </div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </div>
</template>

<script>
import { directive } from "vue-awesome-swiper";

export default {
  name: "Slider",
  directives: {
    swiper: directive,
  },
  data() {
    return {
      banners: ["/slider-1.png", "/slider-2.png", "/slider-3.png"],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: -10,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            1024: {
              slidesPerView: 4,
              spaceBetween: 10
            },
            768: {
              slidesPerView: 3,
              spaceBetween: 10
            },
            640: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            }
          }
      },
    };
  },
};
</script>

<style scoped>
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  @apply w-48 h-48 ;
}
</style>

We have different usage:
Directive and the only difference in the use of the Component

component find Swiper instance by ref attribute.
directive find Swiper instance by directive arg.

we opted for Directive usage, The effect of the two ways and the difference in the applicable environment can be found here

Voila!!! you're good to go.

Check Out Swiper Examples

Addition: Custom Styling for Vue Awesome Swiper
You can create a CSS file for your custom styling by creating a CSS file and add it to the CSS folder inside the assets folder and import into vue-awesome-swiper.js file inside the Plugins Folder or
Find swiper folder inside node_modules folder and copy swiper.css file from the CSS folder into Assets CSS folder and tweak to your satisfaction(Like I did).

vue-awesome-swiper is one of the best slider components for Vue and Nuxt all Thanks to Surmon China.

I hope you find this article useful, best wishes.

Difference between Imperative and Declarative Code

Tiamiyu Sikiru Abidemi — Mon, 10 Jun 2019 08:25:20 +0000

Definition and Code Example:

Imperative - Implementing a procedure to follow in rendering a code function. A good basic example: let's assume we have a button with id "btn" in our html file we want to add an event listener to in changing the body background, our imperative code will look something like:

    <button id="btn">Change bgColor</button>

     let btn = document.querySelector('#btn');
     let parent = document.querySelector('body');
     btn.addEventListener('click', () => {
        parent.style.backgroundColor = "orange";
     });

The above code snippet is an imperative way of solving code issue. Vanilla Javascript style.

Declarative - Relying on methods or packages to handle the processes involved in rendering a code function. Also solving the above code issue in a declarative manner will look something like this.

    <button onclick="changeBgColor()">Change bgColor</button>

    <script>
        function changeBgColor() {
            let parent = document.querySelector('body');
            parent.style.backgroundColor = "orange";
        }
    </script>

frameworks like React and Vue uses Declarative code and Vanilla old style of adding eventlisteners.

to be Cont'd

Give more intermediate examples.

Sequelize Model.update

Tiamiyu Sikiru Abidemi — Sun, 10 Feb 2019 21:29:58 +0000

Using sequelize for model creation, i needed to update my database so i used Model.findByIdAndUpdate which returned an error and i later found the right way to update to the database using
Model.update({
title: 'Updated title '
},
{
where:
{
id: 1
}
})
I hope this helps someone out there... or is their any other way ? i will like to know thanks.
example below:
https://thepracticaldev.s3.amazonaws.com/i/xv3dnnshqqitd1gs9k66.png

Your Mate

Tiamiyu Sikiru Abidemi — Mon, 04 Feb 2019 22:40:58 +0000

"Your Mate"
that statement crushed a lot of souls and will still continue to do so, but it shouldn't crush you. When people closer to you utter that statement and tell you your mates are these and that never let it get to you and have this in you: you're nobody's mate and no one is your mate, we all have our different working time. Trust your process and be persistent. 😎