Creating the component

To begin with you'll need to create your vue application which will host your reusable component. While building out your component, you'll want to do this in partial isolation of the vue environment. This means you'll not be able to preview what you're building and also know if it works fine. To make up for this, you can make use of Storybook. Storybook is an open source platform that is used to build UI components in isolation. It has amazing features and I 100% recommend it. It also has a pretty decent community to help you get started.

Packaging the component

In order to publish your component to npm, you'll to need to first package the component into distributable builds. Here's reference articles that explain how to do this properly.

For vue 2:

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

For vue 3:

https://v3.vuejs.org/guide/single-file-component.html#building-with-rollup

Testing out the packaged component

Before publishing to npm, you'll want to test out your component in a sample vue application to be sure everything plugs in nicely. To do this, you can use the script below to build and package your component into an installable .tgz file, move the .tgz file to the sample vue application and also install the the packaged component via npm

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

npm pack

cp vue-packaged-component-0.1.0.tgz ~/sample-vue-application-path

cd ~/sample-vue-application-path/

npm i vue-packaged-component-0.1.0.tgz

After running the script, your component will be available in the sample vue application and you can test it out there.

Publishing to npm

This is pretty much an easy step. Put together a workflow that works for you and the rest is just a repetitive procedure. Well, you don't have to think too much about putting this together, this article How to publish packages to npm (the way the industry does things) will show you how to get through this step.

You're done! your component will be published to npm and ready to be used in multiple applications. To view a project I've created and published using this workflow you can check out https://github.com/a4anthony/vue-inline-svgs and https://www.npmjs.com/package/vue-inline-svgs.

Thank you for your time and I hope this turns out really helpful.

How has the journey been? While I initially thought coding was rocket science you know, it looked difficult at the time. How on earth was I going to learn and master "HTML"? A lot of things tried to discourage me, that's pretty much normal with life. Eventually, I started and I realised that yeah, coding is actually rocket science, I was right. It is difficult, time consuming and literally puts on edge every single time. Anytime I hear someone that has been coding say "I hate coding" my reply is always "tell me about your bug". Without a doubt such statements are instigated by a "baby bug" you've come across while coding. At the end of the day, it is still difficult. There's a whole bunch of languages, frameworks etc that are out there with very large and quite complex documentations and in today's world, you need to know at least 5 of them to stand a good position in anything. So you see, the main difficulty is from the time consumption learning these technologies come with but once you can master that, everything becomes easy. Everything else is literally, like writing a story and giving instructions to your computer. I started off with W3Schools and FreeCodeCamp working on html and css and from there I did a little bit of Bootstrap. My learning then became projects-based and I actually think that's a good way to go. I picked up a blog series with PHP and MySQL by CodewithAwa and that's how I got to learn PHP (I also got to read the official documentation and and useful articles in my free time as well). Also at that point I realised that BackEnd web dev was going to be my thing. FrontEnd is still amazing but you know, not all of us are really on the creative side of things when it comes to designs and yeah, I'm still efficient with FrontEnd web dev but I like to keep it simple. Everything pretty much kicked off from there, I was coding literally everyday and looping through the internet until I stumbled on Laravel(people told me about is as well) and you know that "new technology, who is this?" vibe. I jumped on it. I learnt it through Laracasts, the contents there are amazing and basically since then all my PHP works have been through Laravel. You'll meet people that'll try to discourage you from using frameworks but you know, just use a framework and see how easy it makes the work for you and get to decide for yourself(preferably learn the language natively first). I'll more like stop here for now, I’ll talk more on it in future posts. Just start off with the right language or tutorial and everything else with come with experience.

Going professional? Well until now, I’ve had only one job interview and that was for a Backend web dev position. I didn't get the job but in all honesty, the interview went well. I picked out so many things from the requirements and the questions that were thrown at me and they have contributed a lot to my growth in the last couple months. One issue I face is the fact I studied Civil Engineering in University and not Computer Science(or some other tech related program). So yeah, convincing people that you can design a building also build a website becomes quite difficult. Regardless, I'll keep on pushing and improving myself, the goal is to work in a professional environment one day and hopefully that'll happen soon.

Challenges? My major challenge is "Nigeria". The internet and electricity services are quite terrible. I spend so much monthly on data and I definitely do not get my money’s worth. The electricity is quite seasonal. Good occasionally, decent and you know, very bad occasionally as well. Imagine having an idea that could change the world but hey, you need to wait for power to come back on. Quite frustrating if you ask me but regardless, I need to do what I have to do to progress. Also my networking hasn't been great. You know, two programmers are better than one one except one of them doesn't include comments in their code. So yeah, I'll like to connect with more programmers than will be beneficial to my growth and vice versa. If you’re interested, you can leave a message for me here.

Benefits so far? Coding has changed my perspective of life. You know, I fix a 1 week old bug and I realise that yeah, I can achieve anything I put my mind to. It also gives me this mindset that there's always a solution to everything(not doing "x" can also be a solution to the problems that comes with doing "x"). It's made me feel good with myself, I feel ready to change the world.

My advice or opinions? Do NOT try to put everything in your head, just know where you can go to for certain information and you'll be fine. Don't jump on every new technology that comes out, well except you want to. Most of them will actually slow you down and they don't get to meet up to expectations. Code a lot, read a lot. Try to to have a reason attached to every decision you make and also try not to leave projects abandoned.

Build > Complete > Ship

Remember, if David Okon stopped coding because of the issues he faced when he started he wouldn't be where he is today. I don't know who David Okon is and I'm guessing you don't as well but you get my point. No matter what, do not give up.

My 2020?

I'll be honest(it is pretty obvious though), 2020 was really tough. Besides the covid surprise, I still tried to keep things going at my own pace but oh well, that didn't exactly turn out well but... but... I tried. I started the year with just html, css and little bit of php and here's how it turned out,

1. I became proficient with Laravel.
2. Built and worked with a couple api's.
3. Used a few Google services(location api's, analytics etc).
4. Built an e-commerce store(not yet fully in production).
5. Server setup from scratch on Digital Ocean using nginx.
6. Worked with a couple front end frameworks mainly vuejs and nuxtjs . They are definitely amazing.
7. Got 3 job rejections. Sad but I think I'm amazing.
8. Battled with Wordpress at some point.
9. Built a Laravel package for generating and managing discount coupons.
10. I made constant efforts to organise my projects workflow using Trello.
11. Worked on a few projects using Django.

There's probably a few that I've missed out but I think I did amazing still. The sad part still is that the outcome didn't exactly match the effort but we move!

My 2021?

Well, I personally feel my coding journey so far has been a little distorted. So for this year, I'll like to be a little more purposely. I'll like to focus a lot more on open source, it looks amazing and I'll also like to learn a couple new languages and frameworks(nodejs, python, tailwindcss etc). I'm also open and looking forward to joining a team and building amazing projects together. It'll definitely be amazing if I get to speak at a tech event and also attend one. Lastly, this is my year of technical writing, hopefully.

I've tried to keep this as simple as possible and also realistic. I hope this year turns out amazing.

Looking forward to my next post!

This tutorial is also available on github.

First of all, we’ll create a new Laravel project(I’m assuming you already have composer installed).You could call the project anything but I’ll just go with “autopopulate”.

composer create-project laravel/laravel autopopulate

Then open the .env file and adjust the database connection settings to match your database name and credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=autopopulate
DB_USERNAME=root
DB_PASSWORD=

For this tutorial, I’m going to using Countries and States.

Let’s create out model and migrations file for both.

Run

php artisan make:model Country -m

and then run

php artisan make:model State -m

For the country migrations file.

Schema::create(
    'countries',
    function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    }
);

For the state migrations file.

Schema::create(
    'states',
    function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->integer('country_id');
        $table->timestamps();
    }
);

We will create dummy data for both in our database.

Let’s create our factories for both.

Run

php artisan make:factory CountryFactory

and then run

php artisan make:factory StateFactory

For the country factory

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Country;
use Faker\Generator as Faker;

$factory->define(
    Country::class,
    function (Faker $faker) {
        return [
            'name' => $faker->word
        ];
    }
);

For the state factory

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\State;
use Faker\Generator as Faker;

$factory->define(
    State::class,
    function (Faker $faker) {
        return [
            'name' => $faker->word
        ];
    }
);

In the database seeder

<?php

use App\Country;
use App\State;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $countries =  factory(Country::class, 20)->create();
        $countries->each(
            function ($country) {
                factory(State::class, 35)->create(['country_id' => $country->id]);
            }
        );
    }
}

Then run

php artisan migrate

and run

php artisan db:seed

At this point, your database has been populate with dummy data.

Then let’s create our controller to handle all our requests.

You can give your controller any name that suits your project

php artisan make:controller HomeController

Open your web.php file to register routes

Route::get('/', 'HomeController@index');
Route::get('/state/{countryId}', 'HomeController@getState');

In your Controller

<?php

namespace App\Http\Controllers;

use App\Country;
use App\State;

class HomeController extends Controller
{
    /**
     * Display page with all countries
     *
     * @return Illuminate\View\View
     * @author Anthony Akro <anthonygakro@gmail.com> [a4anthony]
     */
    public function index()
    {
        $countries = Country::all();
        return view('welcome', ['countries' => $countries]);
    }
    /**
     * Retrieves state details from database
     *
     * @param int $countryId
     *
     * @return Illuminate\Http\Response
     * @author Anthony Akro <anthonygakro@gmail.com> [a4anthony]
     */
    public function getState($countryId)
    {
        if (!$countryId) {
            $html = '<option value="">' . trans('global.pleaseSelect') . '</option>';
        } else {
            $html = '<option value="' . '">' . '--- Select Sub Category ---' . '</option>';
            $states = State::where('country_id', $countryId)->get();

            foreach ($states as $state) {
                $html .= '<option value="' . $state->id . '">' . $state->name . '</option>';
            }
        }

        return response()->json(['html' => $html]);
    }
}

In your welcome.blade.php file in the the Resources > view folder

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Autopopulate</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- Styles -->
    <style>
        html,
        body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links>a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="flex-center position-ref full-height">
        @if (Route::has('login'))
        <div class="top-right links">
            @auth
            <a href="{{ url('/home') }}">Home</a>
            @else
            <a href="{{ route('login') }}">Login</a>

            @if (Route::has('register'))
            <a href="{{ route('register') }}">Register</a>
            @endif
            @endauth
        </div>
        @endif

        <div class="content">
            <div class="title m-b-md">
                Laravel Autopopulate dropdown
            </div>

            <div style="padding:5rem;">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <select name="country" id="country" class="form-control">
                                <option value="">-- select country --</option>
                                @foreach ($countries as $country)
                                <option value="{{$country->id}}">{{$country->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <select name="" id="state" class="form-control" disabled>
                                <option value="">-- select state --</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#country").change(function() {
                console.log($(this).val());
                $.ajax({
                    url: "/state/" + $(this).val(),
                    method: 'GET',
                    success: function(data) {
                        $('#state').prop('disabled', false);
                        $('#state').html(data.html);
                    }
                });
            });
        });
    </script>
</body>

</html>

To test, run

php artisan serve

and open the url below in your browser

http://localhost:8000

I hope this helped.