The first time I built one of these I thought it was the coolest. I was also intimidated by the process, but after a few attempts and an understanding of what was happening, it became quite fun and simple to pull off.

Defining data properties

We're going to start by defining what fields we'll need to capture, and how many steps the user will have to go through:

• Step 1 will gather the user's username and email
• Step 2 will gather their password and confirmed password

In our Vue instance, we'll define those values as data properties. We're also going to add a number property called step, which we'll use to handle which piece of the form gets rendered to the user, as well as a boolean error flag.

// Register.vue

export default {
  name: 'Register',
  data() {
    return {
      step: 1,
      name: '',
      email: '',
      password: '',
      confirm_password: '',
      error: false,
    }
  },
}

Using v-if

To build the each step of our form, we'll create two <div> elements, each containing the inputs we'll want displayed depending on the step. We can use the v-if directive to provide this conditional logic.

<template v-slot:content>
  <form>
     <div v-if="step === 1">
        <BaseInput 
          label="Name" 
          placeholder="Enter your name..."                 
          v-model="name" 
          required
        />
        <BaseInput 
          label="Email"
          placeholder="Enter your email..." 
          v-model="email" 
          required
        />
     </div>
     <div v-if="step === 2">
       <BaseInput 
         label="Password" 
         placeholder="Enter your password..." 
         v-model="password" 
         type="password" 
         required
       />
       <BaseInput 
         label="Confirm password" 
         placeholder="Confirm password..." 
         v-model="confirmed_password" 
         type="password" 
         required
       />
    </div>
  </form>
</template>

Notice we're using v-model to bind each value to its property in the data() object, and that we've set up our input component to accept the required prop. That prop is getting passed to the component's native HTML input, which takes some validation work off of our plate!

With that, we've got two steps available to display:

Now we need a way to change the step. Let's take a look at how to create handlers to get that done.

Handling the step

Each button component is set up to receive a @click handler as a prop. Here, we're going to define two handlers inside methods: one to increment the step, and one to decrement it.

export default {
  // ...rest of the object
  methods: {
    incrementStep() {
      const formFilled = this.username && this.email;
      if (this.step === 1 && formFilled) {
        this.step = this.step + 1;
      }
    },
    decrementStep() {
      if (this.step === 2) {
        this.step = this.step - 1;
      }
    },
  }
}

Each handler is set up with the following logic:

1. incrementStep only works when step is equal to 1, so that it can only get as far as 2. I've also set up logic to ensure that username and email are provided before the user is able to move onto step 2.
2. decrementStep only works when step is equal to 2, so that it can only get as far as 1.

When we attach those handlers to the buttons, we'll use some v-if directives too. On step 1, we want to allow the user to increment:

<BaseButton v-if="step === 1" @click="incrementStep">Continue</BaseButton>

And on step 2 the user can either go back, or submit.

<BaseButton v-if="step === 2" @click="decrementStep" variant="secondary">Back</BaseButton>
<BaseButton v-if="step === 2" type="submit">Confirm</BaseButton>

We'll place the buttons inside of a wrapper div in order to align them to the right with some spacing.

<form>
  <div v-if="step === 1"><!-- Step 1 inputs --></div>
  <div v-if="step === 2"><!-- Step 2 inputs --></div>
  <div class="button-wrapper">
    <BaseButton 
      v-if="step === 1" 
      @click="incrementStep">Continue</BaseButton>
    <BaseButton 
      v-if="step === 2" 
      @click="decrementStep" 
      variant="secondary">Back</BaseButton>
    <BaseButton 
      v-if="step === 2" 
      type="submit">Confirm</BaseButton>
  </div>
</form>

Now we can we interact with the form:

Handling form submission

To bring it all together, we need to handle the submission of our form. Without a back-end, there's nowhere to really send it. But we can create the handler with some validation to get us started.

Just as we did with the Login page, we are going to add a @submit handler to our form with the prevent event modifier. Then, we'll include the handler as a method in our export object:

<form @submit.prevent="handleRegister">
    <!-- the form we've just built -->
</form>

export default {
    methods: {
      handleRegister() {
        const passwordsFilled = this.password && this.confirm_password;
        const passswordsMatch = this.password === this.confirm_password;
        if (passwordsFilled && passswordsMatch) {
          this.error = false;
          // perform form submission...
        } else if (!passswordsMatch) {
          this.error = true;
        }
      },
    }
}

Let's break down the above validation in handleRegister:

1. We're making sure that password and confirm_password have values
2. We're making sure that password and confirm_password match.

If both are truthy, we'll continue on with form submission and clear errors. Otherwise, we set error to true and inform the user of the error, which appears right above the first input inside of the "header" named slot.

<template v-slot:header>
  <h1>Register</h1>
  <p>Try out our watch list for free today and see what you think.</p>
  <p class="error" v-if="error">
    Either a password field is missing, or they do not match.
  </p>
 </template>

Now when there's a problem with the password, the user will see a message like this:

At this point, we've basically hit a dead end until we get login working and build the actual app.

That's why I'm going to be be turning my attention to the much discussed Supabase: the open-source alternative to Google's Firebase that's becoming quite popular. I've always been drawn to UI, so platforms like this are always exciting for me to work with. See you soon ✌️

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

If you're interested in following along or taking a closer look at the code, feel free to check out the app's Github repo, or you can view the live app that I deployed in just a couple of minutes using Netlify. 😊

Let's get started...

Building an input component

Many of the components we create for this UI are going to be reused so often that we'll be better off defining them globally, rather than meticulously importing them into every parent component we need them in.

Vue 3 actually allows us to do this pretty easily in main.js where the app gets mounted. Let's go ahead and create BaseInput.vue inside of components/global/ and add it to our app before the mount. I'd recommend doing this for highly common components like inputs and buttons, but don't go overboard. 🚢

// globally-defined components 🎉
app.component('BaseInput', BaseInput)

// followed by...
app.use(store).use(router).mount('#app')

Vue template syntax

The template syntax in Vue allows us to insert dynamic values into our HTML markup. Below, the input component template is being generated with a dynamic label value using mustache tags, or {{ }}.

<!-- BaseInput.vue -->

<template>
  <label class="input-wrapper">
    {{ label }}
    <input
      :type="type"
      :placeholder="placeholder"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </label>
</template>

That label value is one of many props that helps this component achieve reusability. Along with the data-bound values of type, value, and placeholder (v-bind, or : for short), these props make our component dynamic because they allows us to redefine those values on every occurrence of the component.

Vue props

In all modern frameworks, props define the content of our components (often using strings, numbers, booleans, or objects as data sources). They can also define the functionality of our components (we can pass functions/handlers too 😎).

On first appearance, props will look just like HTML attributes; however, under the hood they're a core piece of what sets a framework apart from plain old HTML, CSS, and JavaScript.

In Vue, component props must be defined in the export object. We can do this by defining them as strings in an array, or as objects with some configuration options.

// props declared as strings in an array
export default {
  name: 'BaseInput',
  props: ['modelValue', 'label', 'placeholder', 'type'],
}

// props declared as objects
export default {
    name: 'BaseInput',
    props: {
        modelValue: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: 'Placeholder text...',
        },
        type: {
            type: String,
            default: 'text',
        },
    },
}

I always prefer the way of objects because I like setting defaults. Plus, I feel secure having some restraints around type setting. It's no TypeScript, but it's better than nothing!

What's $emit?

Above, you might've noticed this weird looking line on BaseInput.vue:

@input="$emit('update:modelValue', $event.target.value)"

This is a custom event handler, just like the @click event we used in our navigation toggle in my last post in this series.

The $emit function inside of that handler allows us to send events up the component tree, and it takes two arguments:

1. The listener that gets defined in the parent component, 'update:modelValue',
2. The value we're sending up, which in our case is located on the $event object (our input value).

Later when we get to the v-model directive, you'll see where the emit value is going.

Now that we've told our component to be on the lookout for these props, and we're emitting the input value back up to the parent, we can finally use the component in Login.vue and begin passing props in.

<!-- Login.vue -->

<template>
  <h1>Login</h1>
    <form>
      <BaseInput 
        placeholder="Enter email..."
        label="Email"
        v-model="email"
       />
       <BaseInput 
         placeholder="Enter password..."
         label="Password"
         v-model="password"
         type="password"
       />
    </form>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: '',
    }
  },
}
</script>

Let's break down each of the props:

• placeholder - Because we used data-binding on the HTML placeholder attribute in BaseInput.vue, any string value we pass in here as a prop will fill the input's placeholder value.
• label - Similar to placeholder, except that it doesn't end up an HTML attribute; it gets rendered to the user as an input label in the component's template.
• type - We set a default value of "text" in BaseInput.vue, so this value is technically not needed if we want to use a standard text input. However, passing in strings like "password" or "number" allow us to easily change the type of input we'd like to render.
• v-model - Alright, this deserves its own section...

V-model

Vue's v-model directive applies two-way data binding on user inputs (text, select, checkbox, etc.). It's described in the Vue docs as "syntax sugar" (yum 🍫), and is actually shorthand for something that we could just write ourselves.

<BaseInput v-model="email" />

<!-- is the same as... -->

<BaseInput
  :modelValue="email"
  @update:modelValue="email = $event"
/>

Earlier in BaseInput.vue ,we used $emit to send the input value up to the parent component. Now we are:

1. Passing the modelValue prop down to our input component, setting it equal to email
2. Applying the @update listener so that every time the input changes (and emits), we're setting the input value equal to the modelValue we've provided to the input (email or password, in our case).

Note: Writing the v-model longhand syntax on inputs in Vue 3 is a bit different than Vue 2, and it took me a while to figure that out. If you're still on v2, go check out the docs that lay these changes out pretty clearly.

And with that, our text input component is finished! But unfortunately our layout's spacing is not in the best shape.

It's only CSS that we need, but let's explore how to create a styled layout using slots.

Introducing slots in Vue

Slots allow us to create parent components that take dynamic children. In addition to props, they're a great way to improve a component's reusability, so now we're going to use them to tighten up our mobile layout.

If you're familiar with React, you might know the children prop and how it allows you to compose components meant to contain dynamic child elements. This is basically the equivalent in Vue:

<template>
    <section>
        <slot /> <!-- or <slot></slot> -->
    </section>
</template>

The above is an important use case for when we're making button or card components with a single location to place children. But slots come with some deeper functionality.

Named slots

Named slots allow us to use multiple slots, and it's really as simple as it sounds. By using the name attribute, we can be more targeted in our template markup. This is what we're going to use in our new Layout.vue component, which lives in components/layout/.

<!-- Layout.vue -->

<template>
    <div class="layout">
    <div class="header-wrapper">
      <slot name="header" />
    </div>
    <section>
      <slot name="content" />
    </section>
  </div>
</template>

The styling to this layout is minimal and is mostly applied for spacing.

div.layout {
  max-width: 80%;
  margin: 0 auto;
  .header-wrapper {
    margin-top: $space8;
    margin-bottom: $space7;
  }
}

When we want to use this component on the Login page, we'll just need to slot in our content with template tags and the v-slot directive, following by a colon and the named slot we're targeting:

<!-- Login.vue -->

<Layout>
    <template v-slot:header>
        <h1>Login</h1>
  </template>
  <template v-slot:content>
        <form>
            <!-- Form elements go here -->
        </form>
  </template>
</Layout>

Then we can do the exact same thing in our Register view as well:

<!-- Register.vue -->

<Layout>
    <template v-slot:header>
        <h1>Register</h1>
  </template>
  <template v-slot:content>
        <form>
            <!-- Multi-step form elements go here -->
        </form>
  </template>
</Layout>

Beautiful! It's amazing what a little bit of spacing can do. 🌺

Building a button component

Finally, we're going to build out a button that we can use on both Login.vue and Register.vue. We'll call it BaseButton.vue and it's going to receive two props that'll handle functionality and appearance.

<template>
  <button 
    :variant="variant" 
    @click="onClick"
    :class="handledVariant"
  >
    <slot />
  </button>
</template>

1. variant - The variant will determine the button's appearance. In this case, we just need to handle two values passed in: "primary" and "secondary."
2. @click - The click handler will handle the button's functionality. Providing this as a prop allows us to pass in any function we want from the parent.

The class-binding with value, handledVariant, is doing something a bit different...

Computed properties

Instead of referencing a prop, handledVariant is actually a computed property that we've defined on the component instance. Just like methods and data(), computed is an option that we can include in our export. Its purpose is to help us keep programming logic out of our HTML templates.

<script>
    data() {
        return {}
    },
    props: {...},
    methods: {...},
    computed: {
      handledVariant() {
        switch (this.variant) {
          case "primary":
            return "primary";
          case "secondary":
            return "secondary";
          default:
            return "primary";
      }
    },
  },
</script>

Above, we're using a switch statement that returns a string depending on the variant value passed in. That string gets applied as the component's class because we've applied class binding (:class) on the component.

I've also set up a small animation when the component first renders using transform: skew() and box-shadow:

button {
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 900;
  padding: 8px 18px;
  border: none;
  cursor: pointer;
  margin: $space4 0;
  transform: skew(-3deg, -3deg);
  &.primary {
    background: $blue500;
    color: $white;
    padding: 8px 24px;
    transform: skew(0deg, 0deg) translateX(0px);
    box-shadow: 0px 0px 1px 0px rgba($blue500, 0);
    animation: primary 500ms ease 0.5s 1 forwards;
  }
  &.secondary {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid $blue200;
    color: $blue500;
    transform: skew(0deg, 0deg) translateX(0px);
    box-shadow: 0px 0px 1px 0px rgba($black, 0);
    animation: secondary 500ms ease 0.5s 1 forwards;
  }
}

Now when we want to render BaseButton.vue, it's this simple. 👇

<!-- primary style -->
<BaseButton
  :variant="primary"
  :onClick="() => console.log('do something!')"
>
  Continue
<BaseButton>

<!-- secondary style -->
<BaseButton 
  :variant="secondary"
  :onClick="() => console.log('do something else!')"
>
  Go back
<BaseButton>

Event modifiers

Let's finish out this Login.vue component by running a console.log when the form is submitted.

<template>
  <Layout>
    <template v-slot:header>
      <h1>Login</h1>
    </template>
    <template v-slot:content>
      <form @submit.prevent="handleSubmit">
        <!-- form inputs and buttons go here -->
      </form>
    </template>
  </Layout>
</template>

We've attached the @submit handler to our form, which gets triggered every time the user clicks the first button (which defaults to type "submit" when placed inside of a form).

Now we just need to make sure our state values, email and password, are getting captured. We can do that by writing a handleSubmit function and using console.log to see the results.

<script>
export default {
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      console.log(this.email, this.password);
      // view the entire data() object with `this.$data`
    }
  }
}
</script>

But we actually don't need the e.preventDefault() part. Vue handles preventing the page reload for us when we include the .prevent modifier on the submit handler. It also provides a lot of other event modifiers that are all similarly helpful.

And we're done. You can scroll down to view our finalized Login.vue component. 🙌

In the next installment, we'll be focused on building a multi-step form for user registration. See you then!

<template>
  <Layout>
    <template v-slot:header>
      <h1>Login</h1>
    </template>
    <template v-slot:content>
      <form @submit.prevent="handleSubmit">
        <BaseInput 
          placeholder="Enter email..."
          label="Email"
          v-model="email"
        />
        <BaseInput 
          placeholder="Enter password..."
          label="Password"
          v-model="password"
          type="password"
        />
        <div class="right-alignment">
          <BaseButton>Login</BaseButton>
          <aside class="right-alignment">
            <p>Need to sign up?</p>
            <router-link to="/register">Register here.</router-link>
          </aside>
        </div>
      </form>
    </template>
  </Layout>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: '',
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.$data);
    }
  }
}
</script>

<style lang="scss" scoped>
aside.right-alignment {
  text-align: right;
  & > div {
    margin-top: $space6;
  }
}
</style>

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

We left off laying the groundwork for our app in my last post, so let's begin by digging into the mobile Navigation.vue component.

Adding the burger 🍔

When visiting most websites you'll often see menus, especially on mobile, become hidden behind a toggle button that looks like three lines stacked on top of one another. Semantically, these three lines represent a list of items like you'd see in any navigation menu. And as you might guess, they sorta look like a cheeseburger. See how similar they are?

We'll start by marking up the burger in HTML, where we'll be using a two-line approach for simplicity:

  <button class="burger" aria-label="Toggle Menu">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
  </button>

And then we'll do the following:

• Place the burger markup right inside of our <nav> element.
• Wrap our <ul> in a container element. We'll use this to manipulate its style and behavior later on.
• Add an <img> element as the first child of our nav. We'll link the logo as our src attribute.

<template>
  <nav id="nav" role="navigation" aria-label="Main Navigation">
    <img id="logo" src="../../assets/logo.png" width="82" />
    <div class="list-container">
      <ul>
        <li>
          <router-link to="/">Login</router-link>
        </li>
        <li>
          <router-link to="/register">Register</router-link>
        </li>
      </ul>
    </div>
    <button class="burger" aria-label="Mobile Navigation Toggle Button">
      <div class="line line-1"></div>
      <div class="line line-2"></div>
    </button>
  </nav>
</template>

Once we have the burger in our template, we can style it:

• Begin by removing default button styles and setting the button dimensions.
• Define the base styles for each line in our burger (we have two of them). They're each going to be the full width of the button, but only a couple of pixels thick, separated by a margin above and below.
• The &.open syntax is a SCSS selector that styles the element when it has both classes. So when the burger class element also contains the open class, the lines are going to reposition themselves to form an ❌.

button.burger {
  border: none;
  background: none;
  width: 38px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
  .line {
    width: 100%;
    height: 2px;
    border-radius: 20px;
    background: $gray200;
    margin: 12px 0;
    transition: all 0.4s ease-out;
  }
  &.open {
    .line-1 {
      transform: translateY(7px) rotate(45deg);
    }
    .line-2 {
      transform: translateY(-7px) rotate(-45deg);
    }
  }
}

Tip: I perfected the transform positioning by placing a border on the button and making edits in Chrome's Dev Tools. It's much easier to do there than to work directly in the code editor.

Once we're finished, we'll end up with something like this 👇

Styling the navigation menu 🗺️

In order to move on, we'll want to begin styling that .list-container class we wrapped around our <ul> element:

  .list-container {
    display: none;
    opacity: 0;
    height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: $blue100;
    z-index: 99;
    transition: all 0.4s ease-out;
    &.open {
      @include flex(row, center, center);
      opacity: 1;
    }
  }

Let's break down what this is doing exactly:

• display and opacity set a hidden default state
• height and width fill the user's viewport
• position: absolute is removing the element from the flow of the page
• left and top do something different depending on the position property. In our case, these properties set the distance between the element and the closest parent with relative positioning. Ours is the root #app element. Along with height and width, these properties are what make our mobile navigation fill the user's screen.
• Finally, z-index brings the element to the forefront of our user's experience. The transition property is for later when we're toggling between classes and we want a smooth visual effect.

I also want to point out that Vue Router gives us an "active" class, which we'll use to style the currently selected route:

a {
  text-decoration: none;
  color: inherit;
  &.router-link-exact-active {
    color: $blue500;
  }
}

With the addition of some base styles applied to our menu items (I used flexbox to center the div, everybody), our .list-container menu will appear to the user as you see below; the parent <nav> element stays in the forefront using z-index so that we can still access the toggle.

Where Vue comes in 💚

In React we have state: a set of properties which control a component's behavior. State is typically stored and updated with the useState hook, or alternatively, within this.state in class-based components.

In Vue, state is represented with the data object (it's really a function that returns an object, but you get it). Once we begin adding properties, Vue "pulls [this object] into its reactivity system and stores it on the component instance as $data." That's straight from the docs.

If you're confused like I was about the $ prefixes in the Vue ecosystem, this excerpt from the Vue documentation might help:

Vue uses a $ prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix _ for internal properties.

This is why you might see similar references like $store or $route in Vue components. They're just special Vue APIs that help you do stuff 😇

Vue's data and method options

The only property our Navigation component needs is one that tracks the menu's open status. We'll initialize this property with a boolean value of false and call it menuOpen.

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      menuOpen: false,
    }
  },
</script>

Now, we need to handle the toggling of this value. We'll do this by adding a methods options to our component instance and create our first Vue method!

Vue makes it easier for us to reference data values by binding this for methods, so and we need to do is define handleToggleMenu() and use the logical NOT operator to flip the boolean value of menuOpen.

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      menuOpen: false,
  },
  methods: {
    handleToggleMenu() {
      this.menuOpen = !this.menuOpen
    },
  },
}
</script>

Using v-directives in the template

We're going to bring this component full circle by helping our state and methods define component style and behavior, thus driving the user experience. We can do that by turning to v-directives, in particular v-bind.

Let's focus first on the .list-container element. In addition to the normal class attribute we'd see in typical HTML, we can bind class values with the syntax below.

<div class="navigation-wrapper" v-bind:class="{ open: menuOpen }">
  <ul>
    <li>
      <router-link to="/">Login</router-link>
    </li>
    <li>
      <router-link to="/register">Register</router-link>
    </li>
  </ul>
</div>

First, as someone who came to Vue from React, I know the string syntax can be a little disorienting at first. I'm used to using brackets in JSX (i.e. className={}) and inserting some conditional logic. However the class binding acts in a very interesting way.

With v-bind:class (or :class for short), what Vue does is measure the truthiness of a property's value inside of the object. So in this example:

1. We provide an object - { open: menuOpen }.
2. Vue sees the open property and its corresponding value menuOpen
3. If menuOpen is truthy, open is applied as a class, otherwise nothing happens.

Note: It's also important to point out that Vue makes it so that all properties are made available from within a component's template, so we're able to reference menuOpen and handleToggleMenu with ease.

We can go ahead and replicate this functionality on the burger button element with the addition of the @click property.

<button
  aria-label="Mobile Navigation Button"
  class="burger"
  v-bind:class="{ open: menuOpen }"
  @click="handleToggleMenu"
>
  <div class="line line-1"></div>
  <div class="line line-2"></div>
</button>

Similar to React's onClick event handler, we're able to pass a function to the @click handler in order to handle the user's action. This is just one of Vue's many event handlers, including @scroll, @keyup, @keydown, and even @submit. Vue also has event modifiers which are very cool and worth checking out.

When we click the burger button now, our menu toggles on and off screen like it should!

Cascading animation with SCSS 💅

There's one last thing I'd like to do, and that's apply a cascading effect to each individual list item using a @keyframes animation. We could accomplish this by hard coding some classes in CSS, but SCSS gives us a much better way.

Looping with SCSS

SCSS gives us a very easy way to generate as many classes as we'd like with just a few lines of code. We can do this by defining a for loop inside of our <li> selector.

li {
  @for $i from 1 through 8 {
    &.slide-in-#{$i} {
      animation: nav-items-enter 500ms ease #{$i / 12}s 1 forwards;
    }
  }
}

Let's break this down...

1. We set a variable to loop over and use the &.[class-name] syntax in order to create classes for <li> tags.
2. We use the variable we're looping with directly within the class names. This way, we can differentiate between each class. This loop is going to generate .slide-in-1, .slide-in-2, .slide-in-3, and so on.
3. The cascade comes in when setting our element's delay, so that each consecutive class is scheduled to begin animating at slightly later times than the last. The first element comes in at 1/12s, then next at 2/12s, then 3/12s. You get it 😉

But wait. How do we apply these classes? We could hard code them into our HTML template. But this is the perfect time to introduce lifecycle hooks in Vue.

Vue's lifecycle hooks ⚓

The lifecycle of a component is an important thing to consider when developing with Vue. Lifecycle hooks give us windows into moments of time for a component; from when it's created and mounted to the DOM, to when it's updated or removed from view completely.

The below diagram from the official Vue.js documentation may make the component lifecycle more clear:

So just like we have for data() and methods(), we can add the mounted() hook to our component instance and write some good old JavaScript to loop over each of our nav items.

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      menuOpen: false,
    }
  },
  mounted() {
    const navItems = document.querySelectorAll('.list-container li')
    navItems.forEach((item, index) => {
      item.classList.add(`slide-in-${index + 1}`)
    })
  },
  methods: {
    handleToggleMenu() {
      this.menuOpen = !this.menuOpen
    },
  },
}
</script>

Tip: We don't even really need the mounted() method to apply those classes. I just wanted to use a lifecycle hook! Alternatively, we can just use the CSS :nth-child() selector and loop through that, like this 👇

li {
  @for $i from 1 through 8 {
    &:nth-child(#{$i}) {
      animation: nav-items-enter 500ms ease #{$i / 12}s 1 forwards;
    }
  }
}

And viola! We have a mobile menu that toggles, and a nice little cascading animation effect for the menu items as well 🥳

Next up, I'm gonna be building custom input and button components. Hope to see you there 👋

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

Recently, I was listening in on a Twitter Space while building a React component. This egghead.io space was focused on learning and teaching React, and some very experienced folks like Kent C. Dodds were there to spread their wealth of knowledge about the framework.

At one point Kent mentioned inversion of control, something I had never heard of. I barely even made out what he was saying, so I began Googling what I thought it sounded like. Luckily I was close enough, and came across his post that covers the concept in detail.

If I understand it correctly (and if I don't, please tell me 😭), inversion of control is a programming concept that allows us to abstract away logic from a component so that it fits more use cases, "inverting control" of that logic.

Writing reusable components is a valuable skill in React, and I happened to be running into a problem in that moment that inversion of control might solve.

The reusable table component ♻️

The component I was building happened to be pretty complex, and I wanted to make it fit for multiple modules in the project I was working on. The component makes use of a table package called React-Table, which is a hooks-based table library that comes with all the functionality you'd want in a table and no actual UI elements.

Sidenote: This was Very Exciting for me because sometimes I loathe pulling pre-defined styles into a project only to re-style them to fit the UI.

My problem arose while trying to wrap some React Router anchor <Link> tags around <td> elements:

<td {...cell.getCellProps()}>
  {
    <Link to={`/employees/edit/${row.values.id}`}>
      // render the cell contents
      cell.render('Cell')
    </Link>
  }
</td>

React Router provides us a great way to handle the dynamic route, but how do we make the link itself dynamic? We need to be able to swap out the entire string if we want to reuse this table. We also don't know for sure that the interpolated JS is always going to be rows.value.id, so that needs to be dynamic too!

Let's try "inverting control" 🕹️

As I read in the aforementioned write-up by Kent C. Dodds, we can invert control by passing a function down as a prop from the parent component. Note that this isn't a one-to-one comparison of the example he used in the article, but I believe the concept is useful in my case as well.

The function prop allows us to pass the row data into logic that's going to be defined in the parent.

const ReusableTable = ({ linkFn }) => {
  return (
    // the beginning of the table...
    {rows.map(row => (
      <td {...cell.getCellProps()}>
        {
          <Link to={linkFn(row)}>
            // render the cell contents
            cell.render('Cell')
          </Link>
        }
      </td>
    ))}
    // the rest of the table...
  )
}

Now in the parent, an anonymous function is passed to our ReusableTable as linkFn, just like we'd see for an onClick handler, for example. The function will take one argument, which is going to be the row we're passing in. All we'll have it do is return the string interpolation after gaining access to the row data within the table.

<ReusableTable linkFn={passedRow => (
  `/employees/edit/${passedRow.values.id}`
)} />

Now when we render this table in other modules, we'll be able to provide whatever path necessary with whatever interpolated JS we need:

// employees module
<ReusableTable linkFn={passedRow => (
  `/employees/edit/${passedRow.values.id}`
)} />

// projects module
<ReusableTable linkFn={passedRow => (
  `/projects/${passedRow.values.project_id}`
)} />

// customers module
<ReusableTable linkFn={passedRow => (
  `/customers/edit/${passedRow.values.customer_id}`
)} />

I've literally just scratched the surface of this concept, and am excited to become more familiar with it especially in practice. The above is an extremely simple example, sure, but I'm convinced the concept is going to be appearing again and again as I dig deeper into this project and into React.

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

You'll want to be familiar with HTML, SCSS, Flexbox, and the basics of front-end frameworks (components, state, props, etc.) in order to follow along. If you're not, head over to freecodecamp.org or something and dive in 🏊 The best way to learn is to build!

But first...

A basic design system 🎨

Lately I've made it a habit to begin projects by defining a design system up front.

The system I use is just a set of variables to be used throughout the application. The purpose it serves is not only for consistency in design, but it also makes our lives much easier: we'll no longer be getting bogged down choosing between 10px and 12px of padding, or between #this or #that shade of blue.

I came across this tip in a really great e-book called Refactoring UI, written by Adam Wathan and Steve Schoger of Tailwind fame.

They reason that, by limiting our options for spacing, font-size, color, etc. in our design, we're reducing the need to focus on these small decisions in the future.

A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.

16px is a great number to start with because it divides nicely, and also happens to be the default font size in every major web browser.

The values at the small end of the scale should start pretty packed together, and get progressively more spaced apart as you get further up the scale.

You can check out the design system I'm using for Medo through the Github repo I have set up, but it generally looks something like this:

// color
$white: #ffffff;
$blue100: #f0f5ff;
$blue200: #c9ddff;
$gray100: #d6d6d6;
$gray200: #7c89a1;

// space 
$space1: 0.4rem;
$space2: 0.8rem;
$space3: 1.2rem;
$space4: 1.6rem;

// text size
$text1: 1.2rem;
$text2: 1.4rem;
$text3: 1.6rem;
$text4: 1.8rem;

// gradients
$bg: linear-gradient(180deg, white, $blue150);

I also often use mixins, which are just SCSS functions that take optional arguments (CSS properties and values) and spit out chunks of CSS code. I use Flexbox a lot, so this one has been particularly time saving:

@mixin flex(
  $direction: row, 
  $justify: flex-start, 
  $align: flex-start, 
  $grow: 0
) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-grow: $grow;
}

// example use case
.some-flex-container {
  @include flex(row, justify-between, center);
}

Mixins are also great for things like media queries too!

I've been re-using these really simple design system settings in several projects recently and have found them very valuable! Highly recommended.

My First Mobile-First App 📱

Since my work on web apps hasn't required any mobile-friendly designs so far, I haven't developed enough as I'd like for smaller screen sizes. So, I want to take this chance to design this UI exclusively for mobile. Let's make that happen with a little bit of (S)CSS:

body {
  background: #a7cdff;
  font-size: 2.0rem;
  font-family: Lane, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; // default preset with Vue CLI 
  -moz-osx-font-smoothing: grayscale; // default preset with Vue CLI
}
#app {
  height: 100vh;
  width: 100%;
  max-width: 428px;
  margin: 0 auto;
  background-color: $bg;
  background-attachment: fixed;
  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.16);
  position: relative;
  overflow: scroll;
}

We’ll also set up a base template for our app in App.vue, which will house our <nav> element containing <router-link> tags, as well as the <router-view />.

<template>
  <nav id="nav" role="navigation" aria-label="Main Navigation">
    <ul>
      <li>
        <router-link to="/">Login</router-link>
      </li>
      <li>
        <router-link to="/register">Register</router-link>
      </li>
    </ul>
  </nav>
  <router-view />
</template>

We'll finish the nav off for now by extracting it to its own component called Navigation.vue in src/components/layout.

If the above route tags look unfamiliar to you, they're likely your introduction to Vue Router.

Routing with Vue 🛣️

Vue Router, like React Router, handles all of the users' URL requests for new pages and sub-pages. The <router-view /> you see in the template above is the window into each of our app's different pages/views, and the <router-link> tags are just anchor tags made special.

Rather than making a server request when new routes are visited through anchor tags (which is the default behavior of the browser), Vue Router makes the tags behave so that they're just rendering components instead; no page loads or server requests required.

In order to define our Medo routes, we utilize the index.js file in router/ and import our views. Since we selected to use Vue Router when we used Vue CLI for setup, the router has come already configured. All we need to do is import our own views, Login.vue and Register.vue, and define them in the routes array:

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

Note: I'm making the root of our app, /, route directly to the login page. In the future, we may make it so that this a marketing page that advertises features with a sign up CTA.

The Flex Footer 🦶

The final piece I want to cover is the footer, which will be appearing to the user on any public pages the user can view when not logged in. We're going to place that in the App.vue template just below the router, with a couple of changes to our HTML mark-up:

<template>
  <div class="page-wrapper">
    <Navigation />
    <div class="page">
      <router-view />
    </div>
    <footer role="navigation" aria-label="Footer Navigation">
      <img src="./assets/logo.png" alt="Medo logo" width="76" />
      <nav>
        <ul>
          <li>About</li>
          <li>Contact</li>
        </ul>
        <ul>
          <li>Login</li>
          <li>Register</li>
        </ul>
      </nav>
      <div class="copyright">
        <p>&copy; 2021, Medo</p>
      </div>
    </footer>
  </div>
</template>

We're doing a few things here:

1. Wrapping the entire template in a div with class "page-container". This allows us to apply Flexbox to the app container, which has a min-height: 100vh.
2. Wrapping the <router-view> element in a div with class "page". This class sets flex-grow: 1, pushing the footer to the bottom (as long as Step 1 is applied) no matter what content is placed here.
3. Adding our footer markup. This includes an app logo, future navigation items, and a copyright tag.

Like we did with Navigation.vue, we'll extract the footer to its own component, so that the App.vue template looks like this:

<template>
  <div class="page-wrapper">
    <Navigation />
    <div class="page">
      <router-view />
    </div>
    <Footer />
  </div>
</template>

The script tag looks like this:

<script>
import Navigation from '@/components/layout/Navigation'
import Footer from '@/components/layout/Footer'

export default {
  name: 'App',
  components: {
    Navigation,
    Footer,
  },
}
</script>

And the style tag looks like this:

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-size: 2.0rem;
  font-family: Lane, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #a7cdff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
}
p {
  line-height: 1.5;
}
ul {
  list-style: none;
  margin: 0;
}
#app {
  background: $bg;
  background-attachment: fixed;
  width: 100%;
  max-width: 428px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.16);
  overflow: scroll;
}
/* Hide scrollbarfor Chrome, Safari and Opera */
#app::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#app {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.page-wrapper {
  @include flex(column);
  min-height: 100vh;
}
.page {
  flex-grow: 1;
}
</style>

And we're finished!

In my next post, I'll be focused on developing mobile navigation and introducing state into our application for the first time. In the meantime, check out what led me to choose Vue.

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

However, last year I was brought onto a project using jQuery where I was writing a lot of CSS, and it had me wondering whether I liked writing CSS in React at all. That's when I began looking into other frameworks, and developed a crush on Vue.

Why I was crushing on Vue 💚

As a UI Developer I write a lot of CSS, and none of React's solutions were appealing to me. I tried them all: CSS-in-JS, modules, styled-components...all of them had things about them that I didn't quite like (Note: I've since come around to theming with styled-components , and it's now my preferred method in React 👍).

But there were other reasons too:

• I felt that I had hit a wall in React. I began struggling to learn some advanced topics and, frankly, I was trying to move too fast in both the front- and back-end.
• Vue wasn't backed by Big Tech. I don't love the power that Big Tech wields, so I admired the fact that Vue is one of the independent frameworks (I see you too, Svelte).
• I was excited to learn a new framework from square one. The "shiny new object" phenomenon is real! It's easy to get attracted to new tech, and I liked the idea of starting fresh with a new framework.

So with all of this bubbling up, I checked out the notorious Vue documentation. As many have said before me, they are incredibly easy to follow; that's part of the reason I got so hooked on this ecosystem. Plus...

I love how single-file components compartmentalize the JavaScript and allow you to write CSS right inside the file. The v-directives make building components a blast. Vuex was immediately much simpler to wrap my head around than Redux, and between podcasts and great courses online to catch-all repos like this, Vue has a great community behind it.

So let's build a side project 🎉

I figured when I started this blog that I'd be writing about UI-related topics, not building a side project. But since I use React at work and I've been itching for a reason to get back to Vue, I thought it'd be fun to document my experience building with the framework for the first time. So here we are!

Since I love movies, I'm going to build a movie watch list app called Medo (I've never been good at names... 😞) and we'll be working off of the Adobe XD mock-ups pictured above. Some of our MVP requirements for the app will allow users will be able to:

• Login to their account using mock authorization. Later on, I'll get to using Firebase.
• Query movies from a movie database API.
• Manage the movies in their watch list. This includes organizing them into categories like favorites.

In the future, I'd love to make Medo a more social experience so that users can find friends, see what they've been watching, and make recommendations. But this is a start! So, let's wrap up this portion by setting up the project.

Project setup ⚒️

First things first, we'll need to get the Vue CLI installed. The CLI will help us get the app up and running quickly with things like SCSS, Vue Router, and Vuex.

If this is your first time, I would head over to the official documentation and follow the setup guide there. As long as you're familiar with Node and NPM, installation basically boils down to either npm install -g @vue/cli or yarn global add @vue/cli.

Update (6/29/2021): I was so excited to publish this that I forgot to tell you a crucial piece...after you install the CLI you'll want to create the app! To make sure the install was successful, quickly run vue --version and be sure that it spits out a version. Then simply running vue create [name-of-app] will set off the configuration process.

From there, I like choosing to manually set the configuration to use Vue 3, Babel, Router, Vuex, CSS Pre-processors, and the Linter / Formatter.

Then, we'll strip down the app so that only two simple views remain. It's important to note that only the template tags are required in .vue files, so the script tags are not necessarily doing anything (yet).

The Login view component:

<template>
  <main class="login">
    <h1>Login</h1>
  </main>
</template>

<script>
export default {
  name: "Login"
}
</script>

And the Register view component:

<template>
  <main class="register">
    <h1>Register</h1>
  </main>
</template>

<script>
export default {
  name: "Register"
}
</script>

We'll also create a couple of SCSS partial files in assets/css, where we're going to be storing variables and mixins. However, our Vue components won't be able to access those partials until we get them configured in a vue.config.js file at the root of our project. The lines we'll need for that can be found below. For more information config settings, I'd recommend - you guessed it - checking out the documentation.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/css/_variables.scss";
          @import "@/assets/css/_mixins.scss";
        `,
      },
    },
  },
}

If you want to include formatting with Prettier, you can add "plugin:prettier/recommended" to the extends array inside the eslintConfig portion of our package.json:

  "eslintConfig": {
    "extends": [
      // ...existing options
      "plugin:prettier/recommended"
    ],
  // ...rest of the config settings

And create a prettier.config.js file to the root of the directory, where you can set all of your formatting options for consistency in your codebase:

module.exports = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
}

Now that the the basic setup done, we can move onto the fun part: building components 🥳. In my next post, I'll begin doing that by building out the Login page. Meanwhile, check out my last post where you can get to know me and my journey.

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!

Lately, though, I've come to shed that thought and realize that I have experience, and that I'm passionate enough about UI to share my thoughts from time-to-time. So, I've come to the lovely Hashnode to put my introverted thoughts to the virtual page.

First, let me tell you a bit about myself and my journey.

About Me and Everything I Love 🎸

My wife's name is Shannon and she's the reason I brush my teeth in the morning (that's the saying, right?). She's an elementary school teacher as natural as they come, and way more caring and thoughtful than I'll ever be. We have a dog named Luna, a boxer/lab who started graying way too young.

Outside of coding, I love watching and talking about movies and television, and I really enjoy making food for people. Most of all, I grew up passionate about music, playing in bands , and drawn to the process of writing and producing. So much so that I spent my first two years of college studying music production. In the end I went with the "safe" choice that I probably wouldn't make now: a business degree.

About My Journey 🛵

Three years into my marketing career and I was unhappy and unfulfilled as ever. Commuting to a dull office, wasting gas and physical energy, surrounded by folks talking about improving ROI (whatever that means 😉). Interesting to some, of course, but it was never really my thing.

That's when I bought a book on coding. I studied HTML & CSS by Jon Duckett front-to-back before seeking out a more structured setting to learn the fundamentals of programming. I signed up for a six-month, full-stack, nights-and-weekends bootcamp soon after, and finished up in February of 2020 while working my 9-to-5. Bootcamps are not for everyone and certainly aren't required, but going to the bootcamp was the best decision I ever made. It's a "get out what you put in" sort of thing, and I got two Golden Ducks (see below).

Post-Bootcamp ⛺

After graduating I built a couple of small freelance sites, but knew that wasn't the path for me long-term. Ideally, I wanted to build software UI; something that became of interest to me while using (and nitpicking) platforms at my day job.

That opportunity came in August of 2020 when I was hired part-time to re-design the UI of a friend's recruiting software. When I told my peers in bootcamp that I wanted to learn PHP, they laughed. But it came in handy: this entire project was built with PHP and jQuery.

The opportunity buoyed me through the pandemic fall; I was still working my remote day job, and spent a lot of those days (shhh 🤫) reading up on how I was going to tackle a feature, just eager to get back to the UI work. I learned a lot quickly and on the fly.

I was actively looking for my first full-time junior role in March of 2021 when I was asked to interview through LinkedIn for a UI Developer role. A couple of weeks and a few conversations later I got a job offer! Was this real? It was, and I was terrified.

I felt like a fraud. I had never had a proper junior role. It stills feels odd! I couldn't shake the feeling that I missed out on a crucial experience, or that I didn't do it "right" and thus am not as good as others who did. But I've learned to let go of those anxieties as I've gained confidence over the past year. I've gotten comfortable feeling lost, and that's an important feeling for developers to be comfortable with.

My "Stack" 🥞

I like to say my stack is simply HTML, CSS, and JavaScript. I work actively on projects in React, jQuery, and Vue.

I know, I know; that's not a stack. But I really only dabble in the back-end. When I do it's usually in PHP and MySQL, but I have experience writing back-end code in Node/Express and MongoDB too.

You can find me on Twitter and Github , or you can check out my portfolio here . Feel free to reach out, I'd love to hear from you!