DEV Community: Maxwell Adapoe

Clipperlink URL Shortener

Maxwell Adapoe — Wed, 21 Jun 2023 08:57:05 +0000

Hi everyone. I have built a URL shortening app with the ability to manage your links, track click counts and also view some useful analytics about the performance of your link https://clipperlink.com/.
This is my second attempt at building a SaaS as the first one didn't work out well :) so I decided to try something much more simpler.
Let me know what you think in the comments when you check it out. I will really love some ideas on to how to improve user signups etc.

Creating a custom Checkbox Component in Vue 3 (a better approach)

Maxwell Adapoe — Fri, 20 May 2022 13:26:15 +0000

By default when creating a checkbox using a the input checkbox tag with a v-model attribute in vue comes with some additional features as shown here. Attempts to extract this into a separate file causes it to loose these added features that come out of the box.

Here is a simple tutorial guide you in creating a custom checkbox component without any hustle.

We first need to create a vue file which will hold our component and for this tutorial we will go with CustomCheckbox.vue . You can use any name you prefer.

//CustomCheckbox.vue Script Setup approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script setup >
import { computed, defineEmits } from "vue";
const props = defineProps({
  modelValue: { type: [Array, Boolean] },
  value: { type: [Boolean, Object] },
  label: { type: String },
});
const emit = defineEmits(["update:modelValue"]);
const model = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

If you prefer the options api you can go with the below

//CustomCheckbox.vue Options api approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script >
  export default {
    props:{
      modelValue: { type: [Array, Boolean] },
      value: { type: [Boolean, Object] },
      label: { type: String }
    },
    computed:{
      model:{
         get() {
            return this.modelValue;
          },
          set(value) {
            this.$emit("update:modelValue", value);
          }
      }
    }
  }
</script>

With the component in place you can can simply import it and implement it like this

//File that needs to use the component 

<template>
  <p>
    Using the custom checkbox with an array
  </p>
  <p>{{ selectedPeople }}</p>

  <template v-for="person in people" key="person.name" >
  <CustomCheckbox :label="person.name" v-model="selectedPeople" :value="person" />
  </template>

 <br> 
 <p>  Using the custom checkbox as stand alone </p>
 <CustomCheckbox  :label="`I am checked: ${isSelected}`" v-model="isSelected"  />
</template>

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

const people = ref([
  {
    name:"William",
    age: 30,
    sex: "Male"
  },
  {
    name:"Thomas",
    age: 24,
    sex: "Male"
  },
   {
    name:"Jennifer",
    age: 20,
    sex: "Female"
  }
]);

const selectedPeople = ref([]);
const isSelected= ref(false);
</script>

This approach wouldn't require you to write any additional code to get your custom component working with objects and arrays.

Creating Tabs with Vue 2 and Tailwind css

Maxwell Adapoe — Mon, 27 Dec 2021 07:02:18 +0000

So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs.

To be honest its rather simple to implement but requires some understanding of how components work in vue.js
I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out here

We will need 2 components for this:
Tab.vue & Tabs.vue

in Tab.vue:

<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "Tab",
        props: {
            name: {
                required: true,
                type: [Number, String],
            },
            selected:{
                default: false
            }
        },
        data(){
            return {
                isActive:false
            }
        },
        mounted(){

            this.isActive = this.selected;

        }
    }
</script>

in Tabs.vue:

<template>
    <div>
        <div id="tab-links">
            <ul class="flex space-x-2 ">
                <li v-for="(tab, index) in tabs "
                    :key="index"
                    :class="{'border-b-2':tab.isActive}"
                    class="py-2  border-solid text-center w-40 cursor-pointer"
                    @click="selectTab(tab)">
                    {{tab.name}}
                </li>
            </ul>
            <hr>

        </div>

        <div id="tab-details">
            <slot></slot>
        </div>

    </div>

</template>

<script>
    export default {
        name: "Tabs",
        data() {
            return {
                tabs: []
            }
        },
        created() {
            this.tabs = this.$children;
        },
        mounted() {

            //check if a tab has been selected by default
            let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
            //set the default to the first one
            if (hasTabBeenSelected === -1){

                this.tabs[0].isActive=true;
            }

        },
        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = tab.name === selectedTab.name;
                })
            }
        }
    }
</script>

<style scoped>

</style>

With these in place you should have a working tab component.
Feel free to modify this in anyway to meet your use case.
Thanks.

Create a simple time ago component in Vue using Moment.js

Maxwell Adapoe — Sun, 26 Dec 2021 23:28:21 +0000

Ever needed a time ago component where you can parse a datetime string and get your date in the format like 10 days ago , a year ago etc.? Well you could create that easily in vue.js using moment.js.

Let's dive straight into it.

Install moment.js using npm npm install moment --save or with yarn yarn add moment
Create a new component. You can name it TimeAgo.vue
In your component

//TimeAgo.js
<template>
<span>{{convertedDateTime}}</span>
</template>
<script>
import moment from 'moment'
export default {
  name: "TimeAgo",
  props:{
    dateTime:{
      required:true
    }
  },
  computed:{
    convertedDateTime(){
     return moment(this.dateTime).fromNow();
    }
  }
}
</script>

to use it in your project

<template>
...
<time-ago :dateTime='new Date()'/>
...
</template>
<script>
import TimeAgo from "@/components/TimeAgo";

export default {
...
  components: {
    TimeAgo
  }
...
}
</script>

and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the moment.js docs

Adding a link to your console.log in Javascript

Maxwell Adapoe — Sun, 06 Jun 2021 06:36:59 +0000

Many of us as JS devs have come across hyperlinks in the output of console.log which when clicked navigates to a page or url (usually in your terminal when running npm run start or in your browser console when debugging your app written in React or Vue).

Well creating this is rather simple:



console.log('http://mysite.com');
console.log('www.mysite.com');

all you need to do is to have a valid link in the url and thats it. It works.

Below are some options that will not work:



console.log('example.com');
console.log('<a href="http://www.example.com">Link</a>');

Thanks for reading.

Building a Form in Vue using Tailwind CSS and VeeValidate (Part 2)

Maxwell Adapoe — Tue, 25 May 2021 19:22:04 +0000

This is part 2 of 2 on how to create a simple login form with validation using Vue.js, Tailwind CSS and VeeValidate for validation.

You can clone the example app from my repo on Github.

Link to Part 1 here

Part 2: Creating our form and adding validation

In this Part we will look at creating our form and hooking up Veevalidate for frontend form validation

Creating the form

Create a new vue component Login.vue in your src/views folder. You can use the command below



touch src/views/Login.vue

paste the below code into the file:



<template>
  <div class="flex justify-center items-center mt-52">
    <div class="w-full max-w-xs">
      <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="identity-input mb-4">
          <label
            for="identity"
            class="block text-gray-700 text-sm font-bold mb-2"
          >
            Email</label
          >
          <input
            id="identity"
            class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
            type="text"
            placeholder="Email"
            aria-describedby="emailHelp"
            v-model="email"
          />
          <span class="text-xs text-red-700" id="emailHelp"></span>
        </div>

        <div class="password-input mb-6">
          <label
            for="identity"
            class="block text-gray-700 text-sm font-bold mb-2"
            >Password</label
          >

          <input
            aria-describedby="passwordHelp"
            v-model="password"

            class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
            id="password"
            type="password"
            placeholder="*******"
          />

          <span class="text-xs text-red-700" id="passwordHelp"></span>
        </div>

        <div class="flex items-center justify-between">
          <button
            class="bg-blue-600 hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="submit"
          >
            Sign In
          </button>
          <a
            class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
            href="#"
          >
            Forgot Password?
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    login() {
      console.log("logging in");
    },
  },
};
</script>

Setting up the Login Route

in your routes/index.js file add the below




...
import Login from '../views/Login.vue'

...

const routes = [
...,
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
]
...

in your App.vue file add



...
   <router-link
            to="/link"
            class="block ml-4 mt-4
            lg:inline-block lg:mt-0 text-blue-200
            hover:text-white"
            >Login</router-link>

...

With this in place navigating to http://localhost:8080/#/login should look like this :

Setting up VeeValidate

To add validation we need to install VeeValidate



npm install vee-validate --save

Once installation is complete in your main.js add


 javascript
...
import {extend,ValidationObserver, ValidationProvider} from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';


Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});
...

extend Allows you to add more rules to be used globally by the vee-validate functions and components.

ValidationObserver is a component that wraps your forms and provides aggregated validation state for all the fields nested under it.

ValidationProvider component is a component that wraps your inputs and provides validation states.

We then import all the the default rules using import * as rules from 'vee-validate/dist/rules'; and iterate over them using the Object.keys(rules).forEach function.

With that in place we can move on to making the magic Happen.

Adding Validation to the form.

We now need to wrap our form component with the ValidationObserver component



...
 <ValidationObserver ref="loginForm">
<form >
...
</form>
</ValidationObserver>
...

The Validation Provider now goes around our inputs. It accepts a v-slot="v" attribute. To make things a little less verbose we can use ES6's object destructing and replace it with v-slot="{ errors }".
It also accepts a name attribute which is used in displaying the error messages and also accepts the validation rules.
Read more about registering the Validation Provider heere
With this in place we can now make use of the errors and display them in our html as well



      <ValidationProvider name="Email" rules="required|email" v-slot="{ errors }">
            <div class="email-input mb-4">
              <label
                for="email"
                class="block text-gray-700 text-sm font-bold mb-2"
              >
                Email</label
              >
              <input
                id="email"
                class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
                type="text"
                placeholder="Email"
                aria-describedby="emailHelp"
                v-model="email"
              />

              <span class="text-xs text-red-700" id="emailHelp">{{
                errors[0]
              }}</span>
            </div>
          </ValidationProvider>

          <ValidationProvider
            name="Password"
            rules="required|min:6"
            v-slot="{ errors }"
          >
            <div class="password-input mb-6">
              <label
                for="password"
                class="block text-gray-700 text-sm font-bold mb-2"
                >Password</label
              >

              <input
                aria-describedby="passwordHelp"
                v-model="password"
                class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
                id="password"
                type="password"
                placeholder="*******"
              />

              <span class="text-xs text-red-700" id="emailHelp">{{
                errors[0]
              }}</span>
              <span class="text-xs text-red-700" id="passwordHelp"></span>
            </div>
          </ValidationProvider>

Finally we need to ensure that the Validation Observer is triggered when the submit button is pressed to ensure that validation has been passed successfully.
We need to add a v-slot="{ handleSubmit }" to our Validation Observer and also add an @submit.prevent event listener to our form



...
 <ValidationObserver v-slot="{ handleSubmit }" ref="loginForm">
                    <form @submit.prevent="handleSubmit(login)" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
...

That sums it up. Your page should look like this once you click the submit button without entering any values or when you enter an invalid value for your email / password

Building a Form in Vue using Tailwind CSS and VeeValidate (Part 1)

Maxwell Adapoe — Tue, 25 May 2021 19:21:06 +0000

This is part 1 of 2 on how to create a simple login form with validation using Vue.js, Tailwind CSS and VeeValidate for validation.

You can clone the example app from my repo on Github.

Part 1: Setting up Vue.js and Tailwind Css

In this Part we will look at setting up Vue.js and Tailwind Css

Vue CLI

we would start off by creating our Vue.js project using the Vue CLI but you will first have to install it if you haven't already

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Once completed you can check the version using

vue --version

Create a Vue.js App

To create a basic app using the CLI all we need to do is to run

vue create vue-tailwind-app

You will be asked to pick a preset. Choose base

This command generates a basic Vue.js app into a new directory vue-tailwind-app.

We then move into the directory using

cd vue-tailwind-app

and run

npm install && npm run serve

to install all the necessary dependancies and start a simple server. Your app should now be accessible on http://localhost:8080/ or on the server and port shown in your terminal.

Your page should look like this

Installing Tailwind CSS as a Dependency

Now that our vue app has started successfully we can move on to setting up tailwind in our project.

We first need to run

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

to install the necessary dependancies for Tailwind CSS ,PostCss 7 and autoprefixer.

Configure Vue.js and Tailwind CSS

Once this is done we need to create a Tailwind config file tailwind.config.js and a PostCSS config file postcss.config.js in your base directory. This can be done by running

npx tailwindcss init -p

Create a CSS file if you don't already have one, preferable in your assets folder src/assets/css/main.css and use the @tailwind directive to inject Tailwind's base, components, and utilities styles:

/*src/assets/css/main.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

Paste the above code in your main.css file. There may be some errors thrown by your IDE but you can ignore them.

We now need to add our main.css to our src/main.js to create the final connection. In your main.js file
add import './assets/css/main.css' to your initial imports. Your file should now look like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+import './assets/css/main.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Testing out Tailwind CSS

In our App.vue file we will replace the div with the id='nav'
with


   <nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
      <div class="flex items-center flex-shrink-0 text-white mr-6">
        <svg
          class="fill-current h-8 w-8 mr-2"
          width="54"
          height="54"
          viewBox="0 0 54 54"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
          />
        </svg>
        <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
      </div>
      <div class="block lg:hidden">
        <button
          class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
        >
          <svg
            class="fill-current h-3 w-3"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>
      <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div class="text-sm lg:flex-grow">
          <router-link
            to="/"
            class="block mt-4 lg:mr-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >Home</router-link
          >

          <router-link
            to="/about"
            class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >About</router-link
          >
        </div>
      </div>
    </nav>

Your page should now look like this

And voila! you have successfully linked Tailwind Css to your vue.js project

This Brings us to the end of Part 1. You can check out Part 2 here.
Below is an optional guide on some things you can do to theme Tailwind.

Tailwind Tweaks (optional)

When preparing for production, configure the purge option to remove any unused classes to obtain the smallest file size:
to do so you must modify your tailwind.config.js .

module.exports = {
purge: {
    mode:'layers',
    content:['./public/**/*.html', './src/**/*.vue']
  },
...
}

You can also theme your tailwind using

const colors = require('tailwindcss/colors')

module.exports = {
...
 theme: {
    extend: {
      colors:{
        emerald:colors.emerald,
        gray: colors.trueGray,
        orange: colors.orange
      }
    },
  },
...
}