We just posted a course on the freeCodeCamp.org YouTube channel that will teach you Vue as you build real projects, dive into its core features, and create dynamic, reusable, and reactive apps with ease. Rachel Johnson from Scrimba developed this course.

The course is divided into two sections. Here is what is covered in each section.

Section 1:

• Learn what Vue is and why it’s so popular

• Get set up with both CDN and local installs

• Create your first apps

• Explore the structure of a Vue project so you know where everything lives

Section 2:

• Work with Vue’s core building blocks: components, reactivity, template syntax

• Handle images and assets

• Split your app into reusable parts

• Bind data dynamically

• Display content that updates instantly

• A simple Vue Facts app

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

Before diving into the tutorial below, I want to mention that the documentation for Vue is really good. The page on composables explains the basics really well and will get you 90 percent of the way there. I am writing this article because I think the examples in the docs could go a little deeper in explaining how things can work inside of a composable. I will be reiterating some of the information from the docs, but I will also provide an example of a more complex composable.

Here’s what we’ll cover:

• Why Use Composables?

• Simple Composable Example

• Complex Composable Example

  • Util function for fetch

  • useAsyncState Composable

  • Usage in a component

• Conclusion

Why Use Composables?

Composables let you reuse stateful logic across your apps. Whenever there is logic that is used in more than two places, we typically want to pull that logic into its own function. Most of the time, that logic is considered “stateless”, meaning that it takes an input and returns an output. The docs mention date formatting, but this could also include something like currency calculations or string validation.

In modern web applications, there are often pieces of logic that require managing state over time. Inside a typical component, we have the ability to adapt the application depending on the “state” of different variables within the component. Sometimes that logic, or at least pieces of that logic, are reused throughout the app.

For example, in an e-commerce application, you might have logic to increase and decrease the quantity of a product a person is adding to their cart. This logic could be used both on the product page, and inside the cart itself.

The look and feel of both those places will be different, so re-using a full component wouldn’t make sense – but we still want to centralize the logic to make the code easier to maintain. That is where Composables come in.

(It is worth noting that not everything needs to be a composable. Logic that is only used in a single component shouldn’t be refactored into a composable until necessary.)

Simple Composable Example

Let’s take a look at a simple counter example. Here is some code for a very simple Counter component.

<script setup lang="ts">
  import { ref } from 'vue'
  import type { Ref } from 'vue'

  const count: Ref<number> = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
</script>

<template>
  <div class="bg-teal-100 border-2 border-gray-800 rounded-xl p-4 w-64">
    <div class="text-center mb-4">
      <span class="text-lg font-medium text-gray-800">Count: {{ count }}</span>
    </div>

    <div class="flex gap-2 justify-center">
      <button
        @click="decrement"
        class="bg-red-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-red-500 transition-colors"
      >
        -
      </button>

      <button
        @click="count = 0"
        class="bg-gray-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-gray-300 transition-colors"
      >
        Reset
      </button>

      <button
        @click="increment"
        class="bg-green-100 border-2 border-gray-800 rounded px-4 py-0 text-gray-800 font-medium hover:bg-green-500 transition-colors"
      >
        +
      </button>
    </div>
  </div>
</template>

The output of that component would look like this:

This works great, but if we end up needing this same counter logic in another component with a completely different look and feel, then we would end up repeating the logic. We can extract the logic into a composable and access the same stateful logic anywhere we need to.

// counter.ts
import { ref } from 'vue'
import type { Ref } from 'vue'

export default function useCounter(): Readonly<{
  count: Ref<number>
  increment: () => void
  decrement: () => void
}> {
  const count: Ref<number> = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
  return { count, increment, decrement }
}

Then we update the script tag in the component to use the composable:

<script setup>
import { useCounter } from '@/counter.ts'

const { count, increment, decrement } = useCounter()
</script>

<template>
  ...
</template>

Now we can use this logic in multiple components throughout the app.

You will notice that only the logic is copied and each component still has its own copy of the count state. Using a composable does not mean the state is shared across components, only the stateful logic.

Complex Composable Example

In the Vue docs, they give an example of using a composable to handle async data fetching. There are a couple of issues I have with the example they give. The main one is that the error handling is not robust for real world applications. Given that they just want to showcase a straightforward use of composables, this is understandable. But I wanted to showcase a more realistic implementation.

Util function for fetch

Before getting into the composable, we need to set up a util function for the fetch API. This is because we want to make sure every request throws an error if it fails. The fetch API doesn’t throw an error if the request responds with an error status. We have to check the response.ok in order to verify the status, and then throw an error if necessary.

// utils.ts
export async function handleFetch(url: string, options: RequestInit = {}): Promise<Response> {
  const res = await fetch(url, options)
  if (!res.ok) {
    const err = await res.text()
    throw new Error(err)
  }
  return res
}

useAsyncState Composable

When working with async state, the requests can be in a few different states:

• Pending

• Resolved

• Rejected

In addition to these states, we want to track the data or the error that comes back from the request.

// useAsyncState.ts
import { shallowRef } from 'vue'
import type { Ref } from 'vue'

// Specify a type for the response
export type AsyncState<T> = {
  data: Ref<T | null>
  error: Ref<Error | null>
  isPending: Ref<boolean>
  isResolved: Ref<boolean>
  isRejected: Ref<boolean>
}

export default function useAsyncState<T>(promise: Promise<T>): AsyncState<T> {
  // I used shallowRef instead of ref to avoid deep reactivity
  // I only care about the top-level properties being reactive
  const data = shallowRef<T | null>(null)
  const error = shallowRef<Error | null>(null)
  const isPending = shallowRef(false)
  const isResolved = shallowRef(false)
  const isRejected = shallowRef(false)

  data.value = null
  error.value = null
  isPending.value = true
  isRejected.value = false
  isResolved.value = false

  promise.then((result) => {
    data.value = result
    isPending.value = false
    isResolved.value = true
  }).catch(err => {
    error.value = err
    isPending.value = false
    isRejected.value = true
  })

  return { data, error, isPending, isResolved, isRejected }
}

This gives a few more explicit properties for the different states, rather than relying on the values in data and error. You’ll also notice that this composable takes in a promise rather than a URL string like the docs show. Different endpoints will have different response types and I wanted to be able to handle those outside of this composable.

Usage in a component

I have set up an endpoint that will wait a random number of seconds before responding either successfully or with an error. My component is calling this endpoint using the composable and using the data from the composable to update the template.

With the error state showing like this:

You can see a working example at https://understanding-composables.pages.dev/.

To make this a bit easier to explain and understand, I am breaking up the <script> tag and the <template> sections of the component.

Script

<script lang="ts" setup>
import { ref, unref } from 'vue'
import type { Ref } from 'vue'
import { useAsyncState } from '@/composables'
import type { AsyncState } from '@/composables'
import { handleFetch } from '@/utils'

interface RandomResponse {
  msg: string
}

async function getRandomResponse(): Promise<RandomResponse> {
  const response = await handleFetch('https://briancbarrow.com/api/random')
  const text = await response.text()
  return { msg: text }
}

const randomResponseData: Ref<AsyncState<RandomResponse> | null> = ref(null)

const handleMakeRequest = async () => {
    const data = getRandomResponse()
    randomResponseData.value = useAsyncState(data)
}
</script>

Here we have a method, getRandomResponse that calls an endpoint and returns a promise. That promise is then passed into the useAsyncState when handleMakeRequest is called. That puts the full return value into the randomResponseData ref which we can then use inside the template.

Rather than show the full template, I will just show a few portions of it.

Here you can see two different buttons being used depending on the state. I am using a separate button element to indicate the “loading” state, but in practice you can use the composable properties to set the disabled property of the button and change the text.

        <button
          v-if="
            !randomResponseData?.isPending &&
            !randomResponseData?.error &&
            !randomResponseData?.data
          "
          class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          @click="handleMakeRequest"
        >
          Make Request
        </button>

        <!-- Loading State Button -->
        <button
          v-if="randomResponseData?.isPending"
          disabled
          class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg opacity-75 cursor-not-allowed flex items-center mx-auto"
        >
          <svg
            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              class="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              stroke-width="4"
            ></circle>
            <path
              class="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
          </svg>
          Loading...
        </button>

Here are a couple of the rows from the table:

<tr class="divide-x divide-gray-200">
  <td class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0">
    isPending
  </td>
  <td
    class="p-4 text-sm whitespace-nowrap text-gray-500"
    :class="randomResponseData?.isPending ? 'bg-blue-500' : 'bg-gray-300'"
  ></td>
  <td class="p-4 text-sm whitespace-nowrap text-gray-500">
    {{ randomResponseData?.isPending }}
  </td>
</tr>

<tr class="divide-x divide-gray-200">
  <td class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0">
    data
  </td>
  <td
    class="p-4 text-sm whitespace-nowrap text-gray-500"
    :class="randomResponseData?.data ? 'bg-green-500' : 'bg-gray-300'"
  ></td>
  <td class="p-4 text-sm whitespace-nowrap text-gray-500">
    {{ unref(randomResponseData?.data)?.msg }}
  </td>
</tr>

In those tr tags, you can see the template rendering different things depending on the state coming from the composable.

For a more complete look at the code, you can visit the GitHub repo. You can also look at how VueUse, a collection of composables, handles similar functionality: https://vueuse.org/core/useAsyncState/

In a future article, I’ll dive into their implementation.

Conclusion

Composables are an incredibly useful tool in Vue 3. As projects grow in size and scope, knowing how and when to use composables can improve the maintainability of the project over the long term.

The key is identifying when you have stateful logic that needs to be reused across components, then extracting it into a well-structured composable that handles edge cases properly.

For more real world examples you can check out the VueUse library and repo.

Why Vue.js?

Vue stands out in the frontend landscape for several compelling reasons. Its gentle learning curve makes it accessible for beginners while offering depth for experts. As a progressive framework, you can adopt Vue incrementally - use just the view layer or leverage the full ecosystem. Vue delivers exceptional performance with its lightweight virtual DOM implementation and minimal overhead. Vue 3's composition API provides fine-grained reactivity that's both powerful and intuitive. The framework works equally well for small widgets or enterprise-scale applications. Vue offers robust tooling with Vue CLI, DevTools, and official libraries for routing and state management. You'll benefit from active development, regular updates, and extensive third-party resources from the vibrant community.

Course Overview

Bhrugen guides you through Vue's powerful ecosystem, covering essential concepts like reactivity, directives, and component architecture before advancing to routing, API integration, and state management with Pinia.

The curriculum progresses logically through Vue Fundamentals with core concepts and setup, Reactivity for understanding Vue's responsive data system, Directives & Styling for manipulating the DOM declaratively, and Events & Data Binding for creating interactive interfaces. You'll learn about Forms for building and validating user inputs, Component Architecture for creating reusable UI elements, and Component Communication using props, events, and advanced patterns.

The course covers Provide/Inject for dependency injection across components, Slots & Lifecycle Hooks for template composition and timing control, Routing for single-page application navigation, API Integration for connecting to backend services, and State Management with Pinia for global state.

Watch the full course on the freeCodeCamp.org YouTube channel (7-hour watch).

Vue provides simple and flexible ways to manage these interactions, enabling you to build dynamic and engaging applications.

In this guide, we'll cover:

• Basic event handling (for example, click events)

• Event modifiers like .prevent, .once, and .stop

• Custom events between parent and child components

• Handling events in forms

• Keyboard events

• The basics of emit

• The basics of v-model

By the end, you'll be able to handle a wide range of events and improve user interaction in your Vue applications.

Basic Event Handling

Vue makes it easy to handle basic events like click, input, and submit directly in your template. You can use the @ symbol (short for v-on) to listen for events on DOM elements.

Example: Handling a Click Event

<template>
  <div>
    <button @click="handleClick">Click Me</button>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');

function handleClick() {
  message.value = 'Button Clicked!';
}
</script>

Code explanation:

• @click="handleClick": The @ symbol is shorthand for v-on. It listens for the click event and calls the handleClick method when the button is clicked.

• message.value = 'Button Clicked!': In Vue 3's Composition API, ref creates reactive variables. When the button is clicked, the message reacts to variable updates, and the change is reflected in the DOM automatically.

This simple mechanism of listening to events and binding methods is foundational to handling user interactions in Vue.

Event Modifiers

Vue event modifiers allow you to control how events are handled, preventing default behavior or stopping propagation, for example. Common event modifiers include .prevent, .stop, .once, .capture, and .passive.

1. The .prevent Modifier

The .prevent modifier calls event.preventDefault(), preventing the default behavior of events like form submission.

Example: Using .prevent to Handle Form Submission

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputValue" />
    <button type="submit">Submit</button>
  </form>
  <p>{{ output }}</p>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');
const output = ref('');

function handleSubmit() {
  output.value = `Form submitted with value: ${inputValue.value}`;
}
</script>

Code explanation:

• @submit.prevent: Prevents the form from refreshing the page when submitted, allowing the handleSubmit function to process the form data instead.

• v-model="inputValue": Two-way data binding between the form input and the inputValue reactive variable. It updates in real time as the user types.

When to use .prevent: Use .prevent when handling forms or other elements where you want to prevent the default behavior, such as preventing links from navigating.

2. The .stop Modifier

The .stop modifier calls event.stopPropagation(), preventing the event from bubbling up to parent elements.

Example: Prevent Event Bubbling

<template>
  <div @click="handleDivClick">
    <button @click.stop="handleButtonClick">Click Me</button>
  </div>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');

function handleDivClick() {
  message.value = 'Div clicked!';
}

function handleButtonClick() {
  message.value = 'Button clicked!';
}
</script>

Code explanation:

• .stop: Clicking the button only triggers handleButtonClick and prevents the click from propagating to the parent div. Without .stop, clicking the button would also trigger handleDivClick.

When to use .stop: Use it to prevent parent elements from reacting to child element events.

3. The .once Modifier

The .once modifier ensures that the event listener is only called once.

Example: Handling a Click Event Once

<template>
  <button @click.once="handleClickOnce">Click Me Once</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');

function handleClickOnce() {
  message.value = 'Button clicked once!';
}
</script>

Code explanation:

• .once: The handleClickOnce method is triggered the first time the button is clicked. Subsequent clicks do nothing because the event listener is removed after the first execution.

When to use .once: Use it for actions that should only happen once, such as a one-time form submission.

4. The .capture Modifier

The .capture modifier makes the event handler trigger during the capture phase rather than the bubbling phase.

Example: Handling an Event in the Capture Phase

<template>
  <div @click.capture="handleClickCapture">
    <button @click="handleClickButton">Click Me</button>
  </div>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');

function handleClickCapture() {
  message.value = 'Click event captured!';
}

function handleClickButton() {
  message.value = 'Button clicked!';
}
</script>

Code explanation:

• .capture: The click on the parent div is handled first, before the child button’s click event, because the capture phase happens before the bubbling phase.

When to use .capture: Useful when you need to intercept an event before it reaches its target.

Custom Events

In Vue, child components can emit custom events to communicate with parent components. This pattern is commonly used to pass data or trigger methods in parent components.

Example: Emitting and Handling Custom Events

ParentComponent.vue:

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
  <p>{{ parentMessage }}</p>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('');

function handleCustomEvent(payload) {
  parentMessage.value = `Received custom event with payload: ${payload}`;
}
</script>

ChildComponent.vue:

<template>
  <button @click="emitCustomEvent">Emit Custom Event</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits();

function emitCustomEvent() {
  emit('custom-event', 'Hello from ChildComponent');
}
</script>

Code explanation:

• defineEmits(): This is used in the child component to define custom events. Here, the child emits a custom-event with a payload of 'Hello from ChildComponent'. (you can learn more details of emit from here)

• Event Handling in Parent: The parent component listens for custom-event and responds by updating its parentMessage with the event payload.

When to use custom events: Use them for communication between parent and child components, especially for passing data from child to parent.

Event Handling in Forms

Vue’s v-model simplifies handling form inputs by creating two-way data binding between the form field and a data variable.

Example: Handling Input and Form Submission

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="Name" />
    <input v-model="formData.email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
  <p>{{ formOutput }}</p>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({ name: '', email: '' });
const formOutput = ref('');

function handleSubmit() {
  formOutput.value = `Submitted Name: ${formData.value.name}, Email: ${formData.value.email}`;
}
</script>

Code explanation:

• v-model="formData.name": This binds the input field directly to the formData.name variable, allowing automatic updates as the user types. (you can learn more details of v-model from here)

• The handleSubmit method processes the form data and displays it in the paragraph below the form.

Keyboard Events

Vue also makes it easy to handle keyboard events such as keydown, keyup, and keypress.

Example: Handling Keyboard Events

<template>
  <input @keydown.enter="handleEnterKey" placeholder="Press Enter" />
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');

function handleEnterKey() {
  message.value = 'Enter key pressed!';
}
</script>

Code explanation:

• @keydown.enter: Listens for the enter keypress and triggers the handleEnterKey function when pressed. This is useful for form submissions or other actions that should be triggered by a specific key press.

Wrapping Up

Event handling in Vue 3 is pretty straightforward and flexible. From basic click events to custom events and form handling, Vue's event system allows you to create interactive, dynamic applications.

By using event modifiers and custom events, you can fine-tune how events are handled in your app. Understanding these techniques will enable you to create responsive, user-friendly interfaces.

I’m also a big fan of the Vue.js framework, and I’ve been building apps with it for three years.

So it was a delightful surprise when I realized that I could use only the Transition API in Vue.js while leveraging my decent CSS skills to animate a component’s enter and exit animations in such a fluid manner.

How fluid, you might ask? Let me show you:

In this article, we'll build a straightforward movie app with built-in filtering features. By the end, you should have a solid understanding of the <Transition> and <TransitionGroup> built-in components in Vue.js and how they seamlessly handle enter and exit animations within Vue.js.

Prerequisites

Hold on! We need a few tools in our toolkit before we dive into this adventure. This article is designed to be a breeze for beginners, but to ensure a smooth ride, here's what you'll need:

• A basic understanding of HTML, CSS, and Javascript.
• A basic understanding of Transitions and Animations in CSS.
• A basic knowledge of the Vue.js framework.
• You can also access the bare movie app without the transitions here, but only if you think it’s the boring part ;)
• Last but not least, some good background music—I’ll let you choose this one yourself, but there's always freeCodeCamp radio.

Ok, now we're ready to get started.

What is the Transition API?

The Transition API primarily consists of the built-in <Transition> and <TransitionGroup> components in Vue.

The <Transition> component is used for animating single elements or components. In contrast, the <TransitionGroup> is used for animating multiple elements in a list in conjunction with the v-for directive in Vue.

How to Add Animations with the <Transition> Component

The <Transition> component is a built-in component that is typically wrapped around any root element or component for animation benefits. The animations are triggered when the inner element or component is shown or hidden using common Vue directives like v-show or v-if.

This component is "built-in" because it does not need to be imported into the template to be functional. It's recognized by the Vue template compiler.

We can try this out by adding a v-show to our .header-filters container first and wrapping the container in the <Transition> component like below:

<Transition>
  <div v-show="filtersVisible" class="header-filters">
    <input type="search" v-model="searchQuery" placeholder="Search Movies">
    <div class="button-group">
      <button @click="query = ''" :class="{ active: query === '' }">Clear Filters</button>
      <button @click="query = '2021'" :class="{ active: query === '2021' }">2021</button>
      <button @click="query = 'Action'" :class="{ active: query === 'Action' }">Action</button>
    </div>
  </div>
</Transition>

We can then wrap up the animation by including styling specifications for the enter and exit animations. If you are familiar with CSS Animations and Transitions, the mode of operation is pretty similar. If you are not, here is a quick crash course.

.v-move,
.v-enter-active,
.v-leave-active {
  transition: 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

And now, you should have your fluid animations for single root elements with the <Transition> component.

Illustration of the effect of the Transition component when an element is hidden and shown.

What if you want something similar to the video that I shared earlier? Something more mesmerizing? Well, let’s see the <TransitionGroup> component.

How to Add List Animations with the <TransitionGroup> Component

The <TransitionGroup> component is wrapped around a list to animate the insertion, removal, and change of order of the items that are rendered in this list. This list is typically created with the v-for directive.

Unlike the <Transition> component, the elements or components wrapped in the <TransitionGroup> component must have unique key attributes.

<TransitionGroup>
  <MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>

Aside from the instructions above, the <TransitionGroup> component has a similar mode of integration and operation as the <Transition> component.

How to Identify and Name Transitions

A common problem when using <Transition> and <TransitionGroup> components is having multiple instances of these components in your app and using different enter and exit transitions for specific instances. This is why we name <Transition> and <TransitionGroup> components.

The <Transition> and <TransitionGroup> components accept a name prop that helps to identify and group transitions.

<TransitionGroup name="list">
  <MovieCard v-for="movie in filteredMovies" :key="movie.title" :movie="movie" />
</TransitionGroup>

The name prop also determines the class name for styling enter and exit transitions like below:

.list-move,
.list-enter-active,
.list-leave-active {
  transition: 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

Notice that the name prop passed in the <TransitionGroup> code above is “list”, and it is used as a prefix in the styles for enter and exit transitions in the CSS code above.

How to Customize Enter and Exit Animations With CSS

In this article, we used the CSS transition property to help with subtle enter and exit animations. But the <Transition> and <TransitionGroup> components also support the animation property in CSS for much more complex animations with multiple keyframes.

Here is an example of how we can use the animation property in our <Transition> component:

Template

<Transition name="bounce">
  <div v-show="filtersVisible" class="header-filters">
    <input type="search" v-model="searchQuery" placeholder="Search Movies">
    . . .
  </div>
</Transition>

Styles

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

If the concept of keyframes or the animation property in CSS does not make much sense to you, feel free to get a quick introduction to animations in CSS.

Purposeful Motion on the Web

In any discussion about web animations and transitions, it's crucial to address the "why" behind them. Why should we include motion on the web, and is it genuinely indispensable?

Motion on the web serves a purpose that extends far beyond mere aesthetics. It's a powerful tool for conveying messages to your users. Whether it's to elevate your storytelling, provide user feedback, or captivate their attention, animations can play a pivotal role in enhancing your users' experience.

Gone are the days when animations were added merely for decorative purposes. In the modern web landscape, every keyframe should be thoughtfully designed with a clear purpose, and the user should always be at the heart of your design decisions.

That being said, make sure not to overuse animations – as too many moving parts can be distracting and actually detract from the user experience. It's all about balance.

Conclusion

Phew, that was an exciting ride! I hope you enjoyed it. This article shared a lot, and I'm excited to see how you use that information. I would love to know if you built something cool while reading.

Also feel free to look into the official Vue documentation to see what else is possible with the Transition API.

Finally, have fun creating delightful experiences with animation, but always remember CSS animations are only useful to your users when they are purposeful. If you found this article helpful, feel free to connect on favourfelix.com to see what else I'm up to.

This year I had the honor of speaking at VueConf US 2022 and I thought I would share my experience.

Part of this article will cover my personal process, part will look at VueConf specifically, and the rest will be about the conference at large. I hope you enjoy it.

How to Get into VueConf

Call For Papers

Let's start at the beginning, as that's a good place to start. As soon as VueConf announced the Call for Papers (CFPs), I submitted my talks. I had submitted a few, and the one they selected was called, "Maintainable & Resilient Projects Through Internal UI Libraries".

I submitted other talks that I thought had a better chance, but they selected this one, which turned out really well.

The submission process the conference uses is a Google Form. There's nothing wrong with that, but I've noticed that some other conferences use Sessionize or PaperCall which I prefer because you can have an account with your details that pre-fills the forms. With the Google Form, I had to re-type a lot of the same data each time (my life is so hard).

It's not a huge deal, but I mention it in case you're a conference organizer. Those dedicated platforms are pretty sweet. :)

After several weeks, maybe a month, I got the email that I'd been selected. Yay! That gave me plenty of time to prepare.

If you're thinking about speaking at a conference, here's my advice:

• Submit several talks. You're not limited to just one.
• Find out who the organizers are and connect with them. They don't only pick their friends, but it doesn't hurt if they recognize you.
• Try giving your talks ahead of time at meetups. It'll get nerves out, works out kinks, and gets you some good feedback.
• Make your talk stand out. Probably the most important thing is that you need to take time to create a title, pitch, and description that will get the attention of the organizers AND the audience. Communicate the value succinctly.
• Do it! It's a great way to connect with people and potential future employers.

Also, shout out to Wes Bos and Scott Tolinski for giving some good tips on a recent Syntax.fm episode.

After being selected, there was the matter of convincing my boss that our company should sponsor my trip.

How to Convince Your Boss

Some conferences will actually cover flights, accommodations, and even pay speakers. I think it's far more common to cover all the expenses yourself, minus the entry. This means either paying for everything out of pocket, or having your company sponsor your trip (heck yeah!).

Convincing your company to send you to a conference can be tricky because it has to be worth it for them. That's not always easy to prove. If you're presenting, it's better because that could provide an opportunity to promote the company or engage with your community.

Of course, this is going to vary greatly based on your company, their budget, the nature of your role, your team, and your workload.

As a developer advocate, it's a lot more typical for me to go to conferences now, but there's a greater expectation for me to speak, run a booth, host some sort of gathering, and create content (ahem).

Some companies are really good about conference policies, others not so much. One cool thing VueConf does that's really cool is provide folks with a "convince your boss" template that you can copy and fill out with your own details.

I didn't use the template, but they do cover some things that I recommend. In particular, doing the research ahead of time for how much it's going to cost (tickets, flight, accommodation, meals, other travel, and so on) is a good idea.

Something else that helps is arranging to create content or a presentation that you can bring back to your organization. That can help spread your knowledge around and get more value for your employer.

How to Write the Dang Thing

Once you know for sure that you're going, you have to also prepare your talk. If you've never written a presentation before, they're a LOT of work.

I don't even want to tell you how much time went into this presentation in case my boss reads this post (only kind of joking). That's another unspoken cost of sending someone.

You have to come up with a main concept, write an outline, write the script, find funny GIFs, come up with a new but more relevant title and hope no one notices, start wondering why they even picked you because it's not that good of subject after all, consider calling out sick, IMPOSTER SYNDROME, decide you don't care what people think and do it anyway because even if you fail you can always be a goat farmer, practice the talk, realize it's way too long, cut out half of the work you've already done, practice again, halve it again...and this all has to happen the night before your talk because you procrastinated.

And even if you don't you'll still be fiddling with your slides up until 5 minutes before you have to give your talk.

It's exhausting (but worth it).

How to Write a Conference Talk

If your curious about my process for writing a talk, I've been working on it for a while now, and have come up with this little system:

1. Start the content as a blog post.
2. Create a high level outline.
3. Shift concepts around into an order that works.
4. Fill in the gaps for a rough draft.
5. Copy the content into a markdown file.
6. Use Slidev (awesome project by Anthony Fu).
7. Come up with a story arch to make the content a little more interesting.
8. Fill in text.
9. Fill in helper graphics (code, charts, img, gifs)
10. Create speaker notes.
11. Practice reading through.
12. Practice reading through with timer.
13. Practice speaking through.
14. Practice speaking through with timer (camera optional).
15. Practice speaking it to Nugget.

I like this approach because in the end, I have a nice presentation as well as a rough draft for a blog post I can continue with later on. And Slidev is great because I can keep one main theme and reuse it for most of my presentations.

What VueConf is Like

The Check-in Process

I arrived on the first day to help Jessica Sachs give her workshop, "Stress-free Testing for Vue 3" (she's great and you should take her workshop some time).

The check in process was smooth, and one unique thing they had was a nice color-coded sticker system to communicate peoples preferred greeting: wave, hand-shake/fist-bump, hug. So you could stick it to your name tag to let other folks know your preference.

There wasn't much discussion around COVID protocols, but it's worth mentioning in case any of you are concerned about it. There was around 10 of us wearing masks, which I think goes for most events. It's mostly up to individuals, so if you're still uncomfortable in large groups, it's probably good to stick to the virtual events. I did hear of someone testing positive.

The People of VueConf

Ok, on to some more fun stuff – the people. This is one of my favorite parts of events, you get to meet so many great folks. And Vue folks are among the best!

I was happy to see greater diversity among the attendees than in the past. Like most tech events, it was still mostly men from the same few majority groups, but the gap didn't feel as stark as past events.

It felt like a larger distribution of people across the different race, gender, age, and experience spectrums. It was also represented in the speakers. It's working, people – more colors for our kick-ass rainbow!

How to meet people at a conference:

• Don't hang out with the same people. It's easy to fall into chatting with the same people you know, but it's fun to meet new people and you never know what you'll learn.
• People want to meet you. Some people have a harder time initiating a conversation, but are still eager to participate. Keep an eye out for folks and invite them in.
• Follow the Pac-Man rule. If you find yourself in a circle of people chatting, always leave a gap for someone to step into. So your circle should look more like a Pac-Man.
• Unless you need to recharge, during meals, sit at tables with people you don't know and strike up a conversation. It's great to see the variety of folks around you.

Vendors at Conferences

I don't spend a lot of time at the vendor booths, but they are super important for supporting events, and it's a good place to see who's taking care of your community. For that reason, I always like to swing by and talk to each vendor at least a little bit.

One thing I would really love to see from vendors is less wasteful swag. There's always so much stuff they give away for free that I'm sure just ends up in waste bins.

Some swag is super effective and a great way to get a brand name out there, but less garbage would also be awesome :)

VueConf Content

I thought the talks were well-selected, but they definitely leaned very heavily towards testing. I didn't mind that because each testing talk brought it's own perspective, and it's an important subject.

Not every talk was specific to Vue, which I always appreciate. It's cool to see a broad range of talks, both in the topics represented and in their target experience level. There was also a good range of talks from broad concepts to very specific, personal experiences.

This year I got to experience a workshop as well (as an assistant). I really liked the experience because workshops give you much more time on a single topic to really dive deep and get your hands dirty. And there's way more opportunity for one-on-one time between attendees and instructors.

HOT TIP: if you know someone putting on a workshop, ask them if they need any help. It got me into a workshop for free, got my friend some extra help, and it got the attendees more individual attention. Triple-win!

VueConf follows a single-track system which means every single talk happens in order, in the same room. This is different than other conferences that do the multi-track approach where there are multiple tracks running simultaneously, with a more dedicated focus.

They each have their pros and cons:

• Single-track: You know where to go for each talk. You never have to choose between two talks. There's plenty of opportunity to follow the "hallway track" and just chat with folks. You inherently get a little bit of everything.
• Multi-track: There's usually way more content to choose from. There's more content for each specific topic. It's less likely to have time slots with nothing that interests you.

I don't know if I have a preference, but it's something I thought about.

As mentioned above, one of the presentations was done by yours truly. It was a lot of fun. And despite the overwhelming feeling of impostor syndrome, I felt like I did pretty well.

There were a few points that I could have improved upon or just missed, but I don't think it showed on stage. Some folks even told me it was their favorite talk.

That was really nice...( ˘ ³˘)♥︎♥︎♥(°◡°♡)

It's published on Vue Mastery now. You can find it here: https://www.vuemastery.com/conferences/vueconf-us-2022/maintainable-and-resilient-projects-through-internal-ui-libraries/

Would love to hear what you think.

One last little tip/trick I might start doing is to ask organizers if I can give my talk on the first day. I'd rather get it out of the way so I can actually sleep at night and really enjoy the rest of the conference.

In-Person Conference Extracurriculars

In case you've never been to an in-person conference, you should know that post-conference events (parties) are going on probably every night. And it's great! Most of the time it's around grabbing drinks at a bar, but some conferences focus more on networking events.

At VueConf this year, I went to a few events.

• The first night, after the workshops, there wasn't much because it was technically still before the conference. It was a great chance to catch up with Bart Ledoux.
• The second night there was no official event because the organizers were hosting the speaker dinner. This consisted of drinks at the hotel pool beforehand, some swimming, and then walking over to a Thai restaurant with amazing Massaman curry. I also got Alex Kyriakidis his first Thai tea.
• The last night of the conference was spent once again at the hotel pool for swim and drinks, then there was a hosted happy hour with some food and drinks. After everything, we found a karaoke bar for some songs and drinks (there was some drama finding a place, but in true VueConf fashion, we found it).

In case it wasn't obvious, a lot of the external events revolve around drinks and/or bars. Which is fine for me because I don't mind a few drinks and can keep myself under control. However, I wish there were more events that focused less around alcohol. It would be more inclusive for folks that prefer not to drink.

Anyway, regardless of the venue/activity, I think it's worth going to as many extra events as you can. They're usually a lot of fun, and are a great way to connect with folks, both professionally and to make new friends. There's so much value there.

Two tips, though:

1. Don't forget to bring your badge to after parties (learned that one the hard way).
2. Try not to get trashed. Some folks did, and it's a bad look for you and possibly your employer (learned that the easy way).

In Closing

Conferences are great, and VueConf was no exception. If you haven't been to a conference, you should go. If you've been to a conference, you should go again. I find they are a good way to recharge my battery.

From this lineup, my favorite talk was probably "How we migrated our HUGE app to Vue 3" by Alex Van Liew. It was very informative from hands-on experience, but it also wasn't so subjective that it wasn't useful. Alex did a great job putting it together and delivering it (and I think he said it was his first talk ever).

One last minute tip for the whole event. Be active on Twitter before, during, and after. Put the conference name in your Twitter name. Use whatever hashtag is associated. It makes it way easier to find other folks.

And if you're not already on Twitter, you should get on it because everyone uses Twitter (right Adam?).

Thank you so much for reading. If you liked this article, please share it. It's one of the best ways to support me. You can also sign up for my newsletter or follow me on Twitter if you want to know when new articles are published.

Have you ever wondered how frameworks are built? A couple of weeks ago I was writing an article and asked myself, what's the first line of code Evan You wrote to build Vue.js?

Well, thanks to Git and Evan You pushing Vue's code to GitHub, I have been able to travel back in time, like Marty McFly with his DeLorean time machine. But I went nine years back, to 2013, and "watched" Evan writing his code.

Photo by wallup.net

What's the goal of this article?

I am writing this article to show you what's behind a popular tool like Vuejs and what could be the starting point for building something like it. Specifically, we'll look at what was Evan's You starting point.

We will learn from Vue's creator by looking at the source code of his oldest commits. We'll examine what he wrote to make the first implementation of a Vue application and how he wrote the logic in plain JavaScript to make the mustache syntax work.

What is Mustache syntax?

Well, if you are wondering what the hack is mustach syntax, let me explain. It is a basic form of data binding used by Vuejs to interpolate text inside a template.

From the vue documentation:

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

<span>Message: {{ msg }}</span>

The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.

Ok, now that you know what that is, in the next section I'll answer your next question...

What will I learn after reading this article?

Ok fair enough, you want to know why should you read this article and what will you learn from it.

If you are either a seasoned Vuejs developer or just at the beginning of your journey, you will learn how everything started for a popular tool like Vue.

You will also learn how to hunt for a specific feature of a framework, browse old GitHub commits, and understand how you can apply plain JavaScript knowledge to start building the first features of one of the most popular frameworks of our time.

In the next section we will start exploring the Vue.js repository. We will look at the fist and second commits to understand what files were created for the initial setup of the framework.

This will help us find the feature that we are looking for (mustache syntax) and figure out also how the first Vue application was made.

Exploring Vue's Oldest Commits

Alright, let's get started. If you want to follow me on this time traveling journey, hit this link. There, you'll find the Vuejs repository tagged 0.6.0. We are interested in its first and second commits.

I have downloaded a copy of the source code locally, precisely the source code of the second commit. Let's browse the code.

The Folder Structure

The project structure in the second commit is fairly simple. Apart from a bunch of configuration files for jshing, grund, GitHub and the two JSON files, we can see three folders:

• test
• src
• explorations

The last one is an addition Evan made. The exploration folder wasn't there on the first commit. And it is in there that the actual creation of Vue.js started to take place.

We will come back here later in the article, but before that let's look at the fist commit to find Evan's fist lines of code. Spolier: everything starts with a test.

The First Vue Test Case

The first lines of code are, I believe, those written in the test.js file. This is where Evan used the Mocha library to write Vue's first test case and set up the tests framework in the first commit named initial setup.

Why is this relevant? Well, we are not just hunting for a specific feature but we also want to understand what's the starting point for building a tool like Vuejs.

Do you start by writing the implementation? Or do you write a basic test case just to set everything up so that you can write proper tests when you have an idea of what you want to implement?

Well, below you have your answer!

Let's check the code of the test/test.js file:

var Element = require('element')

describe('Element', function () {
    it('should have a variable', function () {
        assert.equal(Element, 123)
    })
})

On the first line, there is a require statement to import an element class that will be defined somewhere later on in the code. Imagine this as the ancestor of the Vue class.

Next, the Mocha describe function is set to provide a general context. Within it, an it function is called to write the actual test case that checks if the imported Element class is equal to 123, which it does using the method assert.equal().

To run the tests we will have to install all dependencies npm i and run the Grunt tasks. But since most of the libraries used are deprecated we won't do that (and this is also not the goal of this article and video).

In the next section, we will explore the second commit aiming to reach our goals – find the first implementation of Vue.js, and understand how the mustache syntax works.

To do that, we need to look at the second commit's source code, which is the one I have downloaded and am exploring on VSCode (if you are following the video as well).

Here is the direct link.

The First Vue Application

In Vue, everything we do is done inside a Vue application, which is bound to an istance of the Vue class. So, we first need to find the first implementation of this class and in there we will find the logic behind the mustache syntax.

Ok, we need to look inside the explorations folder – here is where the magic happens.

The main file is called getset-revitis-style.html, and here we can see all the logic of the first Vue application (which you can find in the body tag) and its first implementation (which you can find in the script tag).

I made a copy of the entire file and placed everything inside an index.html file so we can mess around with the code, add some console logs, and explore how it works.

Let's serve the file using serve -s. (To run this command you will need to install an npm package. Just type in the terminal npm install -g serve.)

In the body tag we can see the Vue app, in div with an id of test. Today we either define our app inside a root element with an id of app or root, but at the time it started with a test div.

 <div id="test">
   <p>{{msg}}</p>
   <p>{{msg}}</p>
   <p>{{msg}}</p>
   <p>{{what}}</p>
   <p>{{hey}}</p>
  </div>

Inside the test div we can see the double mustache syntax. Cool! This is the first time it was used, but how does it work?

In the next section we will explore the first Vue class and look for the logic to make this {{msg}} work.

The First Vue Instance

Ok, we found the firt usage of this syntax, but we are not done yet. We want to know how it works, remember? So, let's look in the script tag where we will find the logic of the first Vue class.

Evan created a class called Element – remember that we are nine years back in time, and ES6 isn't a thing until 2015.

The class declaration is written using function Element () {}. This is the ancestor class of what we know today as the Vue instance that we instantiate by doing new Vue().

function Element (id, initData) {
  // The first implementation is in here
}

Next, the first Vue instance is created by instantiating the Element class:

var app = new Element('test', {
  msg: 'hello'
})

The class expects an id and an initData. These are passed to the instance as the test value and as an object {} with a property called msg. This is our first implementation of the options object.

Ok, we are getting there. Now that we know how the class was implemented and instantiated, let's look inside to find how the double mustache syntax was implemented.

How the Mustache Syntax Works

Here we are. The next code block will show us the syntax secrets. This is what we have been aiming to understand, the article's goal.

After this you will be able to understand what's behind this syntax and even edit and replace it with your own.

You could do something like [[msg]] and maybe call it the double box syntax. 🤓

The code below is used to make the double mustache syntax work. In between there is more code that is responsible for how data are bound.

var bindingMark = 'data-element-binding' // <-- data binding mark 

function Element (id, initData) {
// The first implementation is in here
  var self = this,
  el = self.el = document.getElementById(id)
  //console.log(self.el)

  bindings = {} // the internal copy
  data = self.data = {} // the external interface
  content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)

  el.innerHTML = content


  // ....

  function markToken(match, variable) {
    console.log(match) // <-- LOG match = {{msg}}
    console.log(variable) // <-- LOG captured group as variable = msg
    //console.log(bindings)
    bindings[variable] = {}
    //console.log(bindings)

    console.log('<span ' + bindingMark + '="' + variable + '"></span>')
    return '<span ' + bindingMark + '="' + variable + '"></span>'
  }

  // ...
}

I have added a couple console logs to figure out what's inside two key parameters (match and variables) and what the markToken method returns.

Inside the script tag the fist line is a variable var bindingMark = 'data-element-binding'. This variable will be used as a data attribute and will replace the contents of the curly brackets using the replace method with a regular expression el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken).

Yes, you got it right – behind this syntax there is plain JavaScript and specifically one of the oldest methods built in the language.

string.replace() is a string method that accepts two parameters:

• the regular expression
• a callback function

Check the result of the regex using a site like to see what matches the regex \{\{(.*)\}\}.

When the callback function markToken is called, we have access to the match and the captured group, respectively used as parameters called match and variables.

You can see these two parameter values using the console logs I added in the source code.

Inside the markToken method, the first line after the console logs is bindings[variable] = {}. This is an internal copy of the data that will be used later for the data binings feature of the framework.

For each match, it sets a new property in the bindings object as an empty object. For instance, if we have {{msg}} a new property called binginds[msg] = {} will be created.

Finally, the return statement builds a span element that uses the value of the bindingMark variable as a data attribute, data-element-binding and assigns to it the variable parameter as property.

So, instead of {{mess}} the following string '<span ' + bindingMark + '="' + variable + '"></span>' is created. The result is the following code:

<span data-element-binding="msg"></span>

The Vue code is still at its early stages. The implementation of the mustache syntax works alongside data bingind that is not yet fully implemented at this point of the framework.

Conclusion

In this article, we discovered the first steps Evan You took to build Vue.js. This is a raw implementation of the framework, and we have seen only a small bit of its code. But it can help us figure out how one of the framework features worked. And hey, things always start small to grow over time.

Let me know if you liked this kind of content. Reach out to me if you want to know what's behind a different feature of Vuejs.

You can also consider subscribing to my YouTube channel.

And you can follow me on Twitter and Linkedin.

In this tutorial, you will learn how to build a single page application. I'll take you through the process step by step, using cutting edge technologies like Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS, and Docker.

Let's get started.

What you need to follow this guide:

To follow along you will need:

• a computer
• to know how to install software
• a basic understanding of HTML, CSS, JavaScript, and PHP
• knowledge of at least one JavaScript framework and an understanding of the MVC design pattern.

This guide is organized into 10 chapters and is based off a live coding series that I record. The live coding series is completely unscripted, so there will be bugs and gotchas there that you won't find in this guide.

You can find the complete playlist at the end of this article.

Everything here should just work, but if it doesn't feel free to ask for help by joining my community on Slack. There you can share code snippets and chat with me directly.

Table of Contents

• What Tech Are We Using?
• How to Setup Your Machine
• How to build the app with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3
• How to Refactor the Admin Dashboard and Create New Admin Pages
• How to Submit Forms with Files
• How to Add the Form to the Component
• How to Store Data
• How to Update Operations
• How to Delete a Resourse
• Wrap up and what's next
• Conclusion

What Tech Are We Using?

First, let's go over the different tools we'll be using in this project.

Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

To simplify this concept, Docker lets you package applications and dependencies in a container.

A containerized application allows you to have a flexible development environment so that you can run different applications without worrying about dependencies, their requirements, and conflicts between different versions. You can easily run applications that, for instance, require two different versions of PHP and MySQL.

Each team member can quickly reproduce the same environment of your application by simply running the same container's configuration.

If you want to learn more about Docker, its Documentation is a great place to start.

Here's a Handbook on Docker essentials, as well, so you can practice your skills.

Mysql

MySQL is an open-source relational database management system. You can use it to organize data into one or more tables with data that may be related to each other.

We need to store data somewhere and here is where MySQL comes into play.

Here are the Docs if you want to read up more. Here's a full free course on MySQL if you want to dive deeper.

Laravel

Laravel is a free, open-source PHP web framework that helps you develop web applications following the model–view–controller architectural pattern.

Laravel is an amazing PHP framework that you can use to create bespoke web applications.

Here's the Laravel Documentation for more info, and here's a full project-based course to help you learn Laravel.

Laravel Sail

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker development environment.

Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Usually, creating a development environment to build such applications means you have to install software, languages, and frameworks on your local machine – and that is time-consuming. Thanks to Docker and Laravel Sail we will be up and running in no time!

Laravel Sail is supported on macOS, Linux, and Windows via WSL2.

Here's the Documentation if you want to read up on it.

Laravel Jetstream

When building web applications, you likely want to let users register and log in to use your app. That is why we will use Jetstream.

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application.

It uses Laravel Fortify to implement all the back end authentication logic. Here are the Docs.

Vuejs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

Vue is a fantastic framework that you can use as a stand-alone to build single-page applications, but you can also use it with Laravel to build something amazing.

Here's the Vue Documentation if you want to read up. And here's a great Vue course to get you started.

Inertia JS

Inertia is the glue between Laravel and Vuejs that we will use to build modern single-page applications using classic server-side routing.

You can learn more about it in the Documentation here.

Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that you can use to build any design, directly in your markup

We'll use it in this project to build our design. Here's a quick guide to get you up and running if you aren't familiar with Tailwind.

How to Set Up Your Machine

To follow along with my live coding (and this tutorial), you will need to install Docker desktop on your machine. If you are using Windows, you will also need to enable WSL in your system settings.

Visit the Docker getting started page to install Docker Desktop.

If you are on Windows, enable WSL2 by following the steps here.

If you have any trouble, feel free to reach out or join my community on Slack to get help.

Laravel Installation with Sail

If you have successfully installed Docker Desktop on your machine, we can open the terminal and install Laravel 9.

Open a terminal window and browse to a folder where you want to keep your project. Then run the command below to download the latest Laravel files. The command will put all files inside a folder called my-example-app, which you can tweak as you like.

# Download laravel
curl -s "https://laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app

Deploy Laravel on Docker using the sail up command

With Docker Desktop up and running, the next step is to start Laravel sail to build all the containers required to run our application locally.

Run the following command from the folder where all Laravel files have been downloaded:

vendor/bin/sail up

It will take a minute. Then visit http://localhost and you should see your Laravel application.

If you run sail up and you get the following error, it is likely that you need to update Docker Desktop:

ERROR: Service 'laravel.test' failed to build:

How to Build the App with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3

In this section, we will define a basic roadmap, install Laravel 9 with Laravel Sail, Run sail, and build the containers.

I will also take you on a tour of Laravel Sail and the sail commands.

Then we will install Jetstream and scaffold Vue and Inertia files and have a look at the files and available features.

Next, we will populate our database and add the front end provided by Jetstream to register an account and log into a fresh Laravel application.

Finally, we will have a look at the Jetstream dashboard, and the Inertia/Vue Components and then start playing around.

Along the way, we'll disable the registration, enable the Jetstream user profile picture feature, and then add our first Inertia page where we'll render some data taken from the database.

Here's the live coding video if you want to follow along that way:

And if you prefer following along in this written tutorial, here are all the steps.

Just a reminder – you should have Laravel installed with Sail and have Docker set up on your machine. You can follow the steps above to do so if you haven't already.

Laravel Sail Overview – Sail Commands

With Laravel Sail installed, our usual Laravel commands have sligtly changed.

For instance, instead of running the Laravel artisan command using PHP like php artisan, we now have to use Sail, like so: sail artisan.

The sail artisan command will return a list of all available Laravel commands.

Usually, when we work with Laravel, we also have to run the npm and composer commands.

Again, we need to prefix our commands with sail to make them run inside the container.

Below you'll find a list of some commands you will likely have to run:

# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require <packageName> # it was: composer require <packageName>
# Use npm commands
sail npm run dev # it was: npm run dev

You can read more in the Sail documentation.

Install Jetstream and Scaffold Vue and Inertia

Let's now install the Laravel Jetstream authentication package and use the Inertia scaffolding with Vue3.

cd my-example-app
sail composer require laravel/jetstream

Remember to prefix the composer command with sail.

The command above has added a new command to Laravel. Now we need to run it to install all the Jetstream components:

sail artisan jetstream:install inertia

Next we need to compile all static assets with npm:

sail npm install
sail npm run dev

Before we can actually see our application, we will need to run the database migrations so that the session table, required by Jetstream, is present.

sail artisan migrate

Done! Jetstream is now installed in our application. If you visit http://localhost in your browser you should see the Laravel application with two links at the top to register and log in.

Populate the Database and Create a User Account

Before creating a new user, let's have a quick look at the database configuration that Laravel Sail has created for us in the .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password

As you can see, Laravel Sail configures everything we need to access the database container that is running on Docker. The DB_DATABASE is the name of the database and it is the same as the project folder. This is why in the previous step we were able to run the migrate command without issues.

Since we already migrated all database tables, we can now use the Laravel built-in user factory to create a new user then use its details to log in our user dashboard.

Let's open artisan tinker to interact with our application.

sail artisan tinker

The command above will open a command line interface that we can use to interact with our application. Let's create a new user.

User::factory()->create()

The command above will create a new user and save its data in our database. Then it will render the user data onto the screen. Make sure to copy the user email so we can use it later to log in. Then exit by typing exit;.

The default password for every user created with a factory is password.

Let's visit the login page and access our application dashboard.

Jetstream Dashboard

After login you are redirected to the Jetstream dashboard, which looks amazing by default. We can customize it as we like, but it is just a starting point.

Jetstream/Vue Components and Inertia Overview

The first thing you may notice after installing Jetstram is that there are a number of Vue components registered in our application. Not only that, also Inertia brings in Vue components.

To use Inertia, we need to get familiar with it when defining routes.

When we installed Jetstream, it created inside the resources/js directory a number of subfolders where all our Vue components live. There are not just simple components but also Pages components rendered by inertia as our Views.

The Jetstream inertia scaffolding created:

• resources/js/Jetstream Here we have 27 components used by Jetstream, but we can use them in our application too if we want.
• resources/js/Layouts In this folder there is the layout component used by inertia to render the dashboard page
• resources/js/Pages This is where we will place all our Pages (views) components. You will find the Dashboard page as well as the Laravel Welcome page components here.

The power of Inertia mostly comes from how it connects Vue and Laravel, letting us pass data (Database Models and more) as props to our Vue Pages components.

When you open the routes/web.php file you will notice that we no longer return a view but instead we use Inertia to render a Page component.

Let's examine the / homepage route that renders the Welcome component.

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

It looks like our usual Route definition, exept that in the closure we are returning an \Inertia\Response by calling the render method of the Inertia class Inertia::render().

This method accepts two parameters. The first is a component name. Here we passed the Welcome Page component, while the second parameter is an associative array that will turn into a list of props to pass to the component. Here is where the magic happens.

Looking inside the Welcome component, you will notice that in its script section, we simply define four props matching with the keys of our associative array. Then inertia will do the rest.

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },
        // 👇 Define the props 
        props: {
            canLogin: Boolean, 
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>

We can then just call the props inside the template. If you look at the template section you will notice that laravelVersion and phpVersion are referenced in the code as you normally would do with props in Vuejs.

<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
  Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
</div>

The dashboard component is a little different. In fact it uses the Layout defined under Layouts/AppLayout.vue and uses the Welcome component to render the Dashboard page content, which is the same as the laravel Welcome page.

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome /> 
                </div>
            </div>
        </div>
    </app-layout>
</template>

Inside the layout component you will notice the two inertia components Head and Link.

We can use the Head component to add head elements to our page, like meta tags, page title, and so on. The Link component is a wrapper aroud a standard anchor tag that incercepts click events and prevents full page reload as you can read in the Inertia documentation.

Link Component Head Component

Disable the Registration Feature

If you are following along, the next step I'll take is to disable one on the features Jetstream provides – register an account.

To do that, we can navigate to config/fortify.php and comment out line 135 Features::registration() from the features array.

'features' => [
        //Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

If we visit the welcome page we will notice that the register link is gone. Also, the route is no longer listed when we run sail artisan route:list.

Enable Jetstream User Profile Picture

Now let's try to enable the Jetstream feature called ProfilePhotos. As you can guess, this will allow the user to add a profile picture.

To do that we need to visit config/jetstream.php and uncomment line 59 Features::profilePhoto.

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(), // 👈
        // Features::api(),
        // Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

If you log in you will see that in the user profile, a new section is available to upload a profile picture.

But before doing anything else we need to run sail artisan storage:link so that Laravel creates a symlink to the storage/app/public folder where we will save all user profile images.

Now try to visit the user profile and update the profile picture. If you get a 404 on the image this is because by default Laravel sail assumes we are using Laravel valet and sets the app URL like so APP_URL=http://my-example-app.test in the .env file. Let's change it and use localhost instead.

APP_URL=http://localhost

Now we should be good to go and be able to see and change our profile image!🥳

How to Add our First Inertia Page and Render Records from the DB

Since we are rendering Vue components instead of blade views, it is wise to start sail npm run watch to watch and recompile our Vue components as we create or edit them. Next let's add a new Photos page.

I will start by creating a new Route inside web.php:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos');
});

In the code above I defined a new GET route and then rendered a component that I will place inside the resources/js/Pages/Guest and call Photos. Let's create it.

Create a Guest folder:

cd resources/js/Pages
mkdir Guest
cd Guest
touch Photos.vue

Then let's define a basic component:

<template>
  <h1>Photos Page</h1>
</template>

If we visit http://localhost/photos/ we will see our new page, cool! Let's copy over the page structure from the Welcome page so that we get the login and dashboard links as well.

The component will change to this:

<template>
    <Head title="Phots" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.user" :href="route('admin.dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <h1>Photos</h1>

        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,

        }
    })
</script>

The next step is to render a bunch of data onto this new page. For that we will build a Model and add some records to the database.

saild artisan make:model Photo -mfcr

This command creates a Model called Photo, plus a database migration table class, a factory, and a resource controller.

Now let's define the database table inside the migration we just creted. Visit the database/migrations folder and you should see a file with a name similar to this: 2022_02_13_215119_create_photos_table (yours will be sligly different).

Inside the migration file we can define a basic table like the following:

 public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->text('description');
            $table->timestamps();
        });
    }

For our table we defined just two new columns, path and description, plus the id, created_at and updated_at that will be created by the $table->id() and by the $table->timestamps() methods.

After the migration we will define a seeder and then run the migrations and seed the database.

At the top of the database/seeders/PhotoSeeder.php file we will import our Model and Faker:

use App\Models\Photo;
use Faker\Generator as Faker;

Next we will implement the run method using a for loop to create 10 records in the database.

    public function run(Faker $faker)
    {
        for ($i = 0; $i < 10; $i++) {
            $photo = new Photo();
            $photo->path = $faker->imageUrl();
            $photo->description = $faker->paragraphs(2, true);
            $photo->save();
        }
    }

We are ready to run the migrations and seed the database.

sail artisan migrate
sail artisan db:seed --class PhotoSeeder

We are now ready to show the data on the Guest/Photos page component. First update the route and pass a collection of Photos as props to the rendered component:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos', [
        'photos' => Photo::all(), ## 👈 Pass a collection of photos, the key will become our prop in the component
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
});

Second, pass the prop to the props in the script section of the Guest/Photos component:

props: {
    canLogin: Boolean,
    canRegister: Boolean,
    photos: Array // 👈 Here
}

Finally loop over the array and render all photos in the template section, just under the h1:

<section class="photos">
    <div v-for="photo in photos" :key="photo.id" class="card" >
        <img :src="photo.path" alt="">
    </div>
</section>

Done! if you visit the /photos page you should see ten photos. 🥳

How to Refactor the Admin Dashboard and Create New Admin Pages

In this chapter we will Re-route the Jetstream dashboard and make a route group for all admin pages.

Then we will see how to add a new link to the dashboard and add a new admin page.

Finally we will take a collection of data from the db and render them in a basic table. The default table isn't cool enough, so for those reading this article, I decided to add a Tailwind table component.

Re-route the Jetstream Dashboard

If we look at the config/fortify.php file we can see that around line 64 there is a key called home. It is calling the Home constant of the Route service provider.

This means that we can tweek the constant and redirect the authenticated user to a different route.

Lets go through it step-by-step:

• update the HOME Constant
• make a route group and redirect logged in users to admin/ instead of '/dashboard'

Our application will have only a single user, so once they're logged in it is clearly the site admin – so makes sense to redirect to an admin URI.

Change the HOME constant in app/Providers/RouteServiceProvider.php around line 20 to match the following:

public const HOME = '/admin';

How to Add an Admin Pages Route Group

Next let's update our route inside web.php. We will change the route registered by Jetstream from this:

Route::middleware(['auth:sanctum', 'verified'])->get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

To this:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // other admin routes here
});

The route above is a route group that uses the auth:sanctum middleware for all routes within the group, a prefix of admin, and adds a admin suffix to each route name.

The end result is that we will be able to refer to the dashboard route by name, which now will be admin.dashboard. When we log in, we will be redirected to the admin route. Our dashboard route will respond since it's URI is just / but the goup prefix will prefix every route in the group and make their URI start with admin.

If you now run sail artisan route:list you will notice that the dashboard route has changed as we expected.

Before moving to the next step we need to update both the /layouts/AppLayout.vue and /Pages/Welcome.vue components.

Do you remeber that the dashboard route name is now admin.dashboard and not just dashboard?

Let's inspect the two components and update every reference of route('dahsboard') to this:

route('admin.dahsboard')

and also every reference of route().current('dashboard') to this:

route().current('admin.dashboard')

After all the changes, make sure to recompile the Vue components and watch changes by running sail npm run watch. Then visit the home page to check if everything is working.

How to Add a New Link to the Dashboard

Now, to add a new admin page where we can list all photos stored in the database, we need to add a new route to the group we created earlier. Let's hit the web.php file and make our changes.

In the Route group we will add a new route:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // 👇 other admin routes here 👇

    Route::get('/photos', function () {
        return inertia('Admin/Photos');
    })->name('photos'); // This will respond to requests for admin/photos and have a name of admin.photos

});

In the new route above we used the inertia() helper function that does the same exact thing – returns an Inertia/Response and renders our Page component. We placed the component under an Admin folder inside Pages and we will call it Photos.vue.

Before we create the component, let's add a new link to the dashboard that points to our new route.

Inside AppLayout.vue, find the Navigation Links comment and copy/paste the jet-nav-link component that is actually displaing a link to the dashboard and make it point to our new route.

You will end up having something like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('admin.dashboard')" :active="route().current('admin.dashboard')">
        Dashboard
    </jet-nav-link>
    <!-- 👇 here it is our new link -->
      <jet-nav-link :href="route('admin.photos')" :active="route().current('admin.photos')">
        Photos
    </jet-nav-link>
</div>

Our link above uses route('admin.photos') to point to the correct route in the admin group.

If you visit localhost/dashboard and open the inspector, you should see an error:

Error: Cannot find module `./Photos.vue`

It is fine – we haven't created the Photos page component yet. So let's do it now!

How to Add a New Admin Page Component

Make a file named Photos.vue inside the Pages/Admin folder. Below are the bash commands to create the folder and the file via terminal, but you can do the same using your IDE's graphical interface.

cd resources/js/Pages
mkdir Admin
touch Admin/Photos.vue

To make this new page look like the Dashboard page, we will copy over its content. You should end up having something like this:

<template>
  <app-layout title="Dashboard"> <!-- 👈 if you want you can update the page title -->
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <!-- 👇  All photos for the Admin page down here -->
          <h1 class="text-2xl">Photos</h1>

        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
});
</script>

I removed a few pieces from the Dashboard template so make sure to double check the code above. The welcome component was removed from the template as it is not required in this page, and also its reference in the script section. The rest is identical.

Feel free to update the page title referenced as prop on the <app-layout title="Dashboard">.

Now when you visit localhost/admin you can click on the Photos menu item and see our Photos page component content. It's not much for now, just an h1.

How to Render Records in the Admin Page as a Table

Now it's time to render the data onto a table. To make things work let's first add our markup and fake that we already have access to as an array of objects and loop over them inside our table. Than we will figure out how to make things work for real.

 <table class="table-auto w-full text-left">
  <thead>
    <tr>
      <th>ID</th>
      <th>Photo</th>
      <th>Desciption</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="photo in photos">
      <td>{{ photo.id }}</td>
      <td><img width="60" :src="photo.path" alt="" /></td>
      <td>{{photo.description}}</td>
      <td>View - Edit - Delete</td>

    </tr>
  </tbody>
</table>

Ok, since we assumed that our component has access to a list of Photos, let's pass a new prop to the component from the Route.

Update the route in web.php and pass to the inertia() function a second argument that will be an associative array. It will have its keys passed as props to the Vue Page component.

In it we will call Photo::all() to have a collection to assign to a photos key, but you can use other eloquent methods if you want to paginate the results, for example.

Route::get('/photos', function () {
    return inertia('Admin/Photos', [
        'photos' => Photo::all()
    ]);
})->name('photos');

To connect the prop to our Page component we need to define the prop also inside the component.

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
  /* 👇 Pass the photos array as a props 👇 */
  props: {
    photos: Array,
  },
});
</script>

Extra: How to use a Tailwind table component

Tailwind is a CSS framework similar to Bootstrap. There are a number of free to use components that we can grab from the documentation, tweak, and use.

This table component is free and looks nice:https://tailwindui.com/components/application-ui/lists/tables.

We can tweek the Photos page template and use the Tailwind table component to get a nice looking table like so:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                              <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                              View - Edit - Delete
                                              </a>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

How to Submit Forms with Files

For the next section we will look into how to submit a form so that we can add a new photo to the database.

• Add a create button
• Add a create route
• Define the PhotosCreate component
• Add a form
• Validate data
• Show validation errors
• Save the file to the filesystem
• Save the model

How to Create a New Photo

Add a link that points to a create route:

<a class="px-4 bg-sky-900 text-white rounded-md" :href="route('admin.photos.create')">Create</a>

Create the route within the admin group:

Route::get('/photos/create', function () {
    return inertia('Admin/PhotosCreate');
})->name('photos.create');

Let's add also the route that will handle the form submission for later:

Route::post('/photos', function () {
    dd('I will handle the form submission')   
})->name('photos.store');

Create the Admin/PhotosCreate.vue component:

    <template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h1 class="text-2xl">Add a new Photo</h1>
                <!-- 👇 Photo creation form goes here -->

            </div>
        </div>
    </app-layout>
</template>


<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },

});
</script>

How to Add the Form to the Component

The next step is to add the form to the page and figure out how to submit it.

If you hit the Inertia documentation you will find out that there is a useForm class that we can use to simplify the process.

First, import the module inside the script tag of the Admin/PhotosCreate.vue component:

import { useForm } from '@inertiajs/inertia-vue3';

Next we can use it in the setup function (Vue 3 composition API):

setup () {
    const form = useForm({
      path: null,
      description: null,
    })

    return { form }
  }

In the code above we defined the function called setup() then a constant called form to have the useForm() class assigned to it.

Inside its parentheses we defined two properties, path and description which are the column names of our photos model.

Finally we returned the form variable for the setup function. This is to make the variable available inside our template.

Next we can add the form markup:

<form @submit.prevent="form.post(route('admin.photos.store'))">

<div>
    <label for="description" class="block text-sm font-medium text-gray-700"> Description </label>
    <div class="mt-1">
        <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="lorem ipsum" v-model="form.description"/>
    </div>
    <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
        <div class="text-red-500" v-if="form.errors.description">{{form.errors.description}}</div>
</div>
<div>
    <label class="block text-sm font-medium text-gray-700"> Photo </label>
    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600">
        <label for="path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
            <span>Upload a file</span>
            <input id="path" name="path" type="file" class="sr-only" @input="form.path = $event.target.files[0]" />
        </label>
        <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </div>
    </div>
</div>
<div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div>

<button type="submit" :disabled="form.processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</form>

The code above uses the Vue v-on directive short end syntax @submit.prevent="form.post(route('admin.photos.store'))" on the form tag, and the dom event submit with the prevent modifier.

Then it uses the form variable that we created earlier and a post method. This is available because we are using the useForm class.

Next we point the form to the route named admin.photos.store that we created earlier.

Inside the form we have two groups of inputs. First, we have the textarea that uses the v-model to bind it to the property form.description that we declared before.

The second group uses the form.path in a Tailwind component (showing the markup for a drop file area).

Right now we are allowing users to upload only a single photo using the v-on directive on the input DOM event @input="form.path = $event.target.files[0]".

The last two things to notice are the error handling done via <div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div> for the path and also for the description.

Finally we use form.processing to disable the submit button while the form is processing.

The next step is to define the logic to save the data inside the database.

How to Store Data

To store the data, we can edit the route we defined earlier like so:

Route::post('/photos', function (Request $request) {
    //dd('I will handle the form submission')  

    //dd(Request::all());
    $validated_data = $request->validate([
        'path' => ['required', 'image', 'max:2500'],
        'description' => ['required']
    ]);
    //dd($validated_data);
    $path = Storage::disk('public')->put('photos', $request->file('path'));
    $validated_data['path'] = $path;
    //dd($validated_data);
    Photo::create($validated_data);
    return to_route('admin.photos');
})->name('photos.store');

The code above uses dependency injection to allow us to use the parameter $request inside the callback function.

We first validate the request and save the resulting array inside the variable $validated_data. Then we use the Storage facades to save the file in the filesystem and obtain the file path that we store inside the $path variable.

Finally we add a path key to the associative array and pass to it the $path variable. Next we create the resource in the database using the Photo::create method and redirect the user to the admin.photos page using the new to_route() helper function.

Make sure to import the Request class and the Storage facades at the top of the web.php file like so:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Now we can add a new photo in the database and show a list of photos for both the admin and standard visitors.

Next we need to complete the CRUD operations and allow the user to edit/update a photo and delete it.

How to Update Operations

Let's start by adding the routes responsible for showing the forms used to edit the resource and update its values onto the database.

Just under the other routes in the Admin group, let's add the following code:

Route::get('/photos/{photo}/edit', function(Photo $photo){
     return inertia('Admin/PhotosEdit', [
            'photo' => $photo
        ]);
})->name('photos.edit');

The route above uses dependency injection to inject inside the function the current post, selected by the URI /photos/{photo}/edit.

Next it returns the Inertia response via the inertia() function that accepts the Component name 'Admin/PhotosEdit' as its first parameter and an associative array as its second.

Doing ['photo' => $photo] will allow us to pass the $photo model as a prop to the component later.

Next let's add the new Page component under resources/js/Pages/Admin/PhotosEdit.vue

This will be its template:

<template>
    <app-layout title="Edit Photo">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Photo</h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">
                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700"
                        >Description</label>
                        <div class="mt-1">
                            <textarea
                                id="description"
                                name="description"
                                rows="3"
                                class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                placeholder="lorem ipsum"
                                v-model="form.description"
                            />
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
                        <div
                            class="text-red-500"
                            v-if="form.errors.description"
                        >{{ form.errors.description }}</div>
                    </div>

                    <div class="grid grid-cols-2">
                        <div class="preview p-4">
                            <img :src="'/storage/' + photo.path" alt />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            <div
                                class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
                            >
                                <div class="space-y-1 text-center">
                                    <svg
                                        class="mx-auto h-12 w-12 text-gray-400"
                                        stroke="currentColor"
                                        fill="none"
                                        viewBox="0 0 48 48"
                                        aria-hidden="true"
                                    >
                                        <path
                                            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label
                                            for="path"
                                            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                                        >
                                            <span>Upload a file</span>
                                            <input
                                                id="path"
                                                name="path"
                                                type="file"
                                                class="sr-only"
                                                @input="form.path = $event.target.files[0]"
                                            />
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </div>
                            <div class="text-red-500" v-if="form.errors.path">{{ form.errors.path }}</div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >Update</button>
                </form>
            </div>
        </div>
    </app-layout>
</template>

The template is actually identical to the Create component, except for a few things. The form points to a route that expects a paramenter that we pass as the second argument to the funtion route. It looks like this: <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">.

There is a section where we can see the original photo next to the upload form group:

 <div class="preview p-4">
    <img :src="'/storage/' + photo.path" alt />
</div>

The rest is identical, and here we have the script section:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from '@inertiajs/inertia-vue3';

export default defineComponent({
    components: {
        AppLayout,
    },
    props: {
        photo: Object
    },
    setup(props) {
        const form = useForm({
            _method: "PUT",
            path: null,
            description: props.photo.description,
        })

        return { form }
    },

});

Notice that we are passing a props object with the photo key, which allows us to reference the model in the template.

Next, this _method: "PUT", line of code is required to be able to submit a PUT request instead of the POST request called on the form tag.

Now let's implement the logic to handle the form submission inside the Route below.

In web.php just under the previous route, let's add one that responds to the PUT request submitted by our form.

Route::put('/photos/{photo}', function (Request $request, Photo $photo)
    {
        //dd(Request::all());

        $validated_data = $request->validate([
            'description' => ['required']
        ]);

        if ($request->hasFile('path')) {
            $validated_data['path'] = $request->validate([
                'path' => ['required', 'image', 'max:1500'],

            ]);

            // Grab the old image and delete it
            // dd($validated_data, $photo->path);
            $oldImage = $photo->path;
            Storage::delete($oldImage);

            $path = Storage::disk('public')->put('photos', $request->file('path'));
            $validated_data['path'] = $path;
        }

        //dd($validated_data);

        $photo->update($validated_data);
        return to_route('admin.photos');
    })->name('photos.update');

The route logic is straigthforward. First we validate the description, next we check if a file was uploaded and if so we validate it.

Then we delete the previously uploaded image Storage::delete($oldImage); before storing the new image onto the datadabse and update the resource using $photo->update($validated_data);.

As before with the store route, we redirect to the admin.photos route using return to_route('admin.photos');.

How to Delete a Resource

The last step we need to take is to write the logic to delete the photo. Let's start by adding the route.

Right below the previous route we can write:

Route::delete('/photos/{photo}', function (Photo $photo)
{
    Storage::delete($photo->path);
    $photo->delete();
    return to_route('admin.photos');
})->name('photos.delete');

This route is also using a wildcard in its URI to identify the resource. Next, its second paramenter is the callback that uses the dependency injection as before. Inside the callback we first delete the image from the filesystem using Storage::delete($photo->path);.

Then we remove the resource from the database $photo->delete(); and redirect the user back return to_route('admin.photos'); like we did in the previous reoute.

Now we need to add a delete button to the table we created in one of the previous steps to show all photos.

Inside the template section of the component Admin/Photos.vue within the v-for, we can add this Jetstream button:

<jet-danger-button @click="delete_photo(photo)">
    Delete
</jet-danger-button>

Find the table cell that has the ACTIONS comment and replace the DELETE text with the button above.

So the final code will be:

<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

As you can see there is a @click event listener on the button. It calls a method delete_photo(photo) that we need to define along with a bunch of other methods to have a nice modal opening to ask for confirmation from the user.

First import the Inertia helper function useForm:

// 0. Import the useForm class at the top of the script section along with all required components
import { useForm } from '@inertiajs/inertia-vue3';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";

Remember to register the component JetDangerButton inside the components object before moving forward.

Next add the setup() function in the script section and implement the logic required to submit the form and show a modal. The comments in the code will guide you thorought all the steps.

// 1. add the setup function
setup() {
    // 2. declare a form variable and assign to it the Inertia useForm() helper function 
    const form = useForm({
        // 3. override the form method to make a DELETE request
        _method: "DELETE",
    });
    // 4. define a reactive object with show_modal and photo property
    // this will be used to figure out when to show the modal and the selected post values
    const data = ref({
        show_modal: false,
        photo: {
            id: null,
            path: null,
            description: null,
        }
    })

    // 5. define the delete_photo function and update the values of the show_modal and photo properties
    // of the reactive object defined above. This method is called by the delete button and will record the details 
    // of the selected post
    const delete_photo = (photo) => {
        //console.log(photo);
        //console.log(photo.id, photo.path, photo.description);
        data.value = {
            photo: {
                id: photo.id,
                path: photo.path,
                description: photo.description
            },
            show_modal: true
        };
    }
    // 6. define the method that will be called when our delete form is submitted
    // the form will be created next
    const deleting_photo = (id) => {
        form.post(route('admin.photos.delete', id))
        closeModal();
    }
    // 7. delare a method to close the modal by setting the show_modal to false
    const closeModal = () => {
        data.value.show_modal = false;
    }
    // 8. remember to return from the setup function the all variables and methods that you want to expose 
    // to the template.
    return { form, data, closeModal, delete_photo, deleting_photo }

}

Finally outside the v-for loop add the modal using the following code. You can place this where you want but not inside the loop.

 <JetDialogModal :show="data.show_modal">
    <template #title>
        Photo {{ data.photo.description.slice(0, 20) + '...' }}
    </template>
    <template #content>
        Are you sure you want to delete this photo?

    </template>
    <template #footer>
        <button @click="closeModal" class="px-4 py-2">Close</button>
        <form @submit.prevent="deleting_photo(data.photo.id)">
            <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
        </form>
    </template>
</JetDialogModal>

This is our final JavaScript code:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import TableComponent from "@/Components/TableComponent.vue";
import { Link } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3';
import JetDialogModal from '@/Jetstream/DialogModal.vue';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";
export default defineComponent({
    components: {
        AppLayout,
        Link,
        TableComponent,
        JetDialogModal,
        JetDangerButton
    },
    props: {
        photos: Array,
    },

    setup() {

        const form = useForm({
            _method: "DELETE",
        });
        const data = ref({
            show_modal: false,
            photo: {
                id: null,
                path: null,
                description: null,
            }

        })


        const delete_photo = (photo) => {
            //console.log(photo);
            console.log(photo.id, photo.path, photo.description);
            data.value = {
                photo: {
                    id: photo.id,
                    path: photo.path,
                    description: photo.description
                },
                show_modal: true
            };
        }
        const deleting_photo = (id) => {
            form.post(route('admin.photos.delete', id))
            closeModal();
        }

        const closeModal = () => {
            data.value.show_modal = false;


        }

        return { form, data, closeModal, delete_photo, deleting_photo }

    }
});
</script>

And here we have the HTML:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            View - Edit - 

                                            <jet-danger-button @click="delete_photo(photo)">
                                                Delete
                                            </jet-danger-button>
                                            </a>
                                        </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
         <JetDialogModal :show="data.show_modal">
            <template #title>
                Photo {{ data.photo.description.slice(0, 20) + '...' }}
            </template>
            <template #content>
                Are you sure you want to delete this photo?

            </template>
            <template #footer>
                <button @click="closeModal" class="px-4 py-2">Close</button>
                <form @submit.prevent="deleting_photo(data.photo.id)">
                    <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
                </form>
            </template>
        </JetDialogModal>
    </app-layout>
</template>

That's it. If you did everything correctly you should be able to see all photos, create new photos as well as edit and delete them.

I will leave you some home work. Can you figure out how to implement the view and edit links before the delete button in the section below?

<!-- ACTIONS -->
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

Wrapup and What's next

During this guide we took our first steps and learned how to build a single page application using Laravel as our backend framework and Vue3 for the front end. We glued them together with Inertia js and built a simple photo application that lets a user manage photos.

We are just at the beginning of a fantastic journey. Learning new technologies isn't easy, but thanks to their exaustive documentations we can keep up and build awesome applications.

Your next step to master Laravel, Vue3, Inertia and all the tech we have been using so far is to hit their documentation and keep learning. Use the app we have build if you want, and improve it or start over from scratch.

Just keep that in mind, coding is fun so relax and enjoy it.

Conclusion

This is just an overview of how I'd build a single page application using these technologies.

If you are familiar with server-side routing and Vuejs then you will enjoy bulding a single page application with Laravel, Inertia, and Vuejs. The learning curve isn't that steep plus you have great documentation to help you out.

I hope you've enjoyed this guide. If so, let me know and consider subscribing to my YouTube channel and following me on Twitter. And if you get stuck, get in touch for help.

You can find the source code for this guide here.

Follow me on Twitter Join me on slack

Here's a brief outline of what we'll cover in this guide:

• What are props in Vue.js?

• How to register props inside a component

• How to work with multiple props

• Vue.js prop types

• How to pass data to props

• How to pass functions to props

• How to validate props

• How to set default values for props

What are Props in Vue.js?

“Props” is a special keyword which stands for properties. It can be registered on a component to pass data from a parent component to one of its children components.

This is a lot easier compared to using state management libraries like vuex for Vue.js applications.

Data in props can only flow one way – from the top, or parent component, to the bottom, or child components. This simply means you cannot pass data from a child to a parent.

Another thing to keep in mind is that Props are read-only and cannot be modified by the child component because the parent component "owns" that value.

Let’s balance things up now – the parent components pass props to the child component(s) while the child component emit events to the parent component(s).

How to Register Props Inside a Component

Let's now take a look at how we can register props inside a component.

Vue.component('user-detail', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})
.js

or, in a Vue Single File Component:

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

In the above code, we registered a prop called name which we can call in the template section of our app.

Note: This is the child component and this prop is going to receive data from the parent component. I will explain this more later.

How to Work with Multiple Props

You can have more than one prop by appending them to the props array, just like this:

Vue.component('user-detail', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: [
    'firstName', 
    'lastName'
  ],
}
</script>

Vue.js Prop Types

To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value.

If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning. The valid types you can use are:

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

Vue.component('user-detail', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

How to Pass Data to Props in Vue

The major goal of using props is to pass down data/information. You can either pass your value as a data property using v-bind, such as in this code:

<template>
  <ComponentName :title=title />
</template>

<script>
export default {
  //...
  data() {
    return {
      title: 'Understanding Props in vuejs'
    }
  },
  //...
}
</script>

or as a static value like this:

<ComponentName title="Understanding Props in vuejs" />

Suppose we are building an app which has so many buttons with different text/background colors. Instead of repeating the button syntax in all our files, it's better to create a button component and then pass the text/background colors as props.

Here's the parent component:

<template>
  <div id="app">
    <Button :name='btnName' bgColor='red' />
    <Button :name='btnName' bgColor='green' />
    <Button :name='btnName' bgColor='blue' />
  </div>
</template>

<script>
import Button from './components/Button'

export default {
  name: 'App',
  data(){
    return{
      btnName:"Joel",
    }
  },
  components: {
    Button
  }
}
</script>

And here's the child component:

<template>
  <button class="btn" :style="{backgroundColor:bgColor}">{{name}}</button>
</template>
<script>
export default {
  name: 'Button',
  props:{
    name:String,
    bgColor:String
  }
}
</script>

The above code shows you how to use both data property and static values when you're getting data from a parent component and using that data in a child component.

Note: you can also use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it.

<template>
  <div id="app">
    <Button :tagUser="signedUp ? 'Logout' : 'Login'" bgColor='red' />
  </div>
</template>
<script>
import Button from './components/Button'
export default {
  name: 'App',
  data(){
    return{
      signedUp: true,
    }
  },
  components: {
    Button
  }
}
</script>

In the above code, we are checking the signedUp data property. If it’s true, the data sent should be Logout, else it should be Login.

How to Pass Functions to Props

Passing a function or a method down to a child component as a prop is relatively straightforward. It's basically the same process as passing any other variable.

But there are reasons why you shouldn't use props as functions – instead you should use emit. This article properly explains why.

<template>
  <ChildComponent :function="newFunction" />
</template>

<script>
export default {
  methods: {
    newFunction() {
      // ...
    }
  }
};
</script>

How to Validate Props in Vue

Vue makes validating props very easy. All you have to do is add the required key and its value to the prop. We can validate with both the prop type and by using required:

props: {
  name: {
    type: String,
    required: true
  }
}

How to Set Default Prop Values

Before concluding this article, let’s now see how to set default values to our props. Default values are rendered if the child component is unable to get data from the parent component.

Vue allows you to specify a default value, just as we specified required earlier.

props: {
  name: {
    type: String,
    required: true,
    default: 'John Doe'
  },
  img: {
    type: String,
    default: '../image-path/image-name.jpg',
   },
}

You can also define the default value as an object. And it can be a function that returns an appropriate value, rather than being the actual value.

Conclusion

In this article, we have learned what props do and how props works in Vue.js.

In summary, we use props to pass down data from the parent components to the child component(s). The child component also emit events to the parent component(s) in case you need to send data/events from the child to the parent component.

Thank you for reading!

Useful Links

• Vue.js Component Props - flaviocopes

• Props - Vue documentation

What is Vue.js?

Vue.js is a progressive JavaScript frontend framework written by Evan You. It's one of the most powerful and easy to learn frameworks, and it has over 9.5 million downloads per month.

In September 2020, Vue 3 core was released. The new Vue.js release introduces some cool new features but also some breaking changes.

Why should I migrate to Vue3?

As the tech industry evolves, so do libraries, languages, and frameworks. At each release, bugs are fixed and new features introduced. And often with any major release, your workflow is enhanced. New features can give you the opportunity to do things that were tedious before.

Vue 3 is still relatively new. You don't have to migrate all your projects over, but as time goes by, support for version 2 might end. Because of this it's a good idea to know the steps you'll need to take to migrate your projects.

In this guide, I'll walk you through the basic steps you will need to follow to approach the migration. We will take a simple project and migrate it to Vue 3.

The project that we will use is intentionally simple, and so anyone can follow along. The more complex your project is, the more carefully you'll want to plan for the migration.

Intro

The new Vue.js version does come with quite a few breaking changes and new features. Also, popular libraries like Vue Router have been updated to support the new Vue version.

If you already know Vue 2, the basics are quite the same. But before you can migrate a project to Vue 3 there are changes you need to take into account.

Depending on the size of the project you want to migrate, make sure to consider all the changes introduced with the new release so that your application will still work after the migration.

For this tutorial, I'll keep things simple and show you how to migrate a Vue.js project that currently uses the Vue 2 CDN.

I'm taking the project from the book I wrote for freeCodeCamp, which you can find here.

In that project we used Vue Router, so we will also look at Vue router's changes in this article.

What you need to follow along with this article

To follow along you need a basic knowledge of Vue.js and Vue Router. If you don't have that. then I suggest you start by checking out my book available on freeCodeCamp.

You can also find the playlist with the full 8 hour course available for free on my YouTube channel.

What we'll cover in this article

This tutorial is organised into three main chapters. First, we will have a look at the changes in Vue.js v3.x then a quick overview of Vue Router v4.x. And finally, we will start planning the migration of a real project.

• Vue v3.x overview
  • breaking changes
• Vue Router v4.x overview
  • breaking changes
• Portfolio Project Migration
  • Clone the Repo
  • Update CDN scripts
  • Update Vue instance
  • Update Vue Router instance

Here's the video version of this article if you want to follow along there:

Watching the video will help you reinforce your learning while reading the steps below. Here you can find the final repository for the project.

Vue v3.x Overview

Vue 3 introduces a few new features and a bunch of breaking changes. Let's see how these changes will affect our application and consider them before migrating.

Vue V3.x Breaking Changes

In Vue 3 the breaking changes basically fall into seven categories:

• Global API (responsible for how Vue behaves) - it's highly likely that you want to look at these changes.
• Template Directives (Changes made to how v- directives work) - it's highly likely that you want to look at these changes.
• Components (Changes to how components work) - if your application uses components it's highly likely that you want to look at these changes
• Render Function (Lets you create HTML elements programmatically)
• Custom Elements (Tells Vue about the creation of custom HTML elements)
• Minor Changes (These might not affect you, but you'll still want to look into these)
• Removed APIs (Things that are no longer available in Vue 3)

Among all the changes there are some of them that any application will use, like the Global API and components. So you will need to take them into account if you want to start using the new Vue release.

And it's worth mentioning the following additional changes:

• The way you create Vue Applications and Component Instances has changed (Global API)
• You should always declare the data option as a function (minor change)
• Change of precedence when using v-if and v-for on the same element (template Ddrectives)
• You should declare an emits option for component events (components)

For a complete list of changes, you can head over to the documentation

Let's look at some of these changes in more detail now.

How to Create Application and Component Instances in Vue 3

In Vue 3 the way you create an app has changed. The Vue app now uses the new .createApp() method to create application instances.

The Vue application is now considered a root component, so the way you define its data options has changed as well.

The HTML root element hasn't changed, so inside an index.html file, you will still see something like this:

<div id="app"></div>

Inside the JavaScript file, there is an important change you need to understand: You will no longer use new Vue() to create a new app instance but instead you'll use a new method called createApp():

// Vue 3 syntax

const app = Vue.createApp({
    // options object
})
app.mounth('#app') // Vue Instance - Root component

// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
})

How to Define a Component in Vue 3

To define a component in Vue 3, you no longer use Vue.component(). Instead you now use the application root component, like so:

/* Vue 3 syntax */
const app = Vue.createApp({
    // options here
})

app.component('componenet-name', {
    // component code here
})


/* Vue 2 syntax*/
Vue.component('component-name', {
    // component code here
})

How to Use the Data Options Object in Vue 3

Given that the main app instance is now considered a root component, you can no longer specify the data property as an object. Instead, you need to define it as a function that returns an object like you usually do in components.

// Vue 3
const app = Vue.createApp({
    // options object
    data(){
        return {
            message: 'hi there'
        }
    }
})
app.mounth('#app') // Vue Instance - Root component

// Vue 2 syntax
const app = new Vue({
    // options object
    el: '#app'
    data: {
        message: 'hi there'
    }
})

Change of Precedence for v-if/v-for in Vue 3

In Vue 2 if you used both directives on the same element, the v-for directive would take precedence over v-if. But in Vue 3 v-if always takes precedence.

However, using both directives isn't a great idea. Make sure to visit the documentation here to learn more.

How to Use the Emits Property on Component Events in Vue 3 (breaking change/new feature)

Similar to the props property, now in Vue 3 there is also an emits property that a component can use to declare the events that it can emit to the parent component.

I strongly recommend using this property to avoid emitting events twice in components that need to re-emit native events, like a click event.

Here is an example from the official documentation:

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

The emits property can also accept an object.

I won't go in-depth into this just yet, but I'll tackle each of the features/changes in a dedicated video series sooner or later, I promise.

Vue Router v4.x Overview

With the new release of Vue.js, we also have a new version of Vue Router. The new release v4.x has some breaking changes that you'll need to consider if you want to migrate a project to the new Vue release.

Vue Router V4 Breaking Changes

Two breaking changes are especially worth mentioning, since they are at the base of a Vue Router application. You will need to know about them to migrate your application later.

• The Vue Router instance has changed
• Theres a new history option

The full list of changes is available here.

Let's look at these two changes in depth.

The Vue Router 4 Instance Has Changed

To create a new Vue Router instance, you no longer use the VueRuter function constructor.

Here is the Vue Router v.3x documentation so you can compare.

The code changes from this:

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

To this:

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(), // <-- this is a new property and it is mandatory!
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

In the code above, to create a new Vue router instance you now have to use the VueRouter object and call the createRouter() method.

Also, the new history property is mandatory – history: VueRouter.createWebHashHistory(). You must define it or you will get a console error.

Next, you'll create the Vue instance using the createApp() method and use the variable app to call the .use() method. You pass the router instance there that you created in the previous step.

Finally, you can mount the root DOM element on the app instance using app.mount('#app').

You can read the Vue router v4.x documentation for more details.

How to Migrate a Portfolio Project from Vue 2 to Vue 3

You can see how to do this in the video on YouTube if you'd like to follow along.

Considering all the above, and after a careful review of the breaking changes, let's try to upgrade one of our projects my Vue course. I'll use the Portfolio, the final project of the course.

We'll need to:

• Clone the repo
• Update the CDN scripts
• Update the Vue instance
• Update the Vue Router instance

To migrate our app to Vue 3 we will definitely need to update the following:

• Vue Application instance
• Vue-Router instance
• CDN Links

Let's take it step by step.

Clone the Project Repository

First, make sure you clone the repo inside the current folder:

git clone https://bitbucket.org/fbhood/vue-folio/src/master/ vue-folio

Since our project still uses the CDN, the next step is to update its links.

Update the Project's CDN

In our project we're using both the Vue CDN and the Vue Router CDN, so let's update them both.

Open the index.html file and replace this:

    <!-- VueJS 3 production version -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

with this:

    <!-- VueJS 3 -->
    <script src="https://unpkg.com/vue@3"></script>

    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@4"></script>

Update the Code

Now if you open the project with the live server and open the inspector, you will notice that the application doesn't show up and there are two errors in the console. Both seem related to the Vue router:

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

Uncaught TypeError: window.Vue.use is not a function
    at vue-router.js:1832
    at vue-router.js:9
    at vue-router.js:10

Uncaught ReferenceError: VueRouter is not defined
    at main.js:185

Vue router?! Why?

Well, remember that when Vue was rewritten, its libraries had to update their codebases, too. So don't forget those breaking changes related to Vue-router since our application uses it.

Let's first update the main Vue instance to use the new syntax. Then we will look at what changes we need to make so that Vue Router works.

Update this code inside the main.js file from this:

// create and mount the Vue instance

const app = new Vue({
    router
}).$mount('#app')

to this:

// create and mount the Vue instance

const app = Vue.createApp({
    router
})
app.mount('#app')

Vue Router 4 Changes

Above we saw the new syntax to define the root Vue instance component. But now, since we are using the Vue router, we need to take into account its breacking changes too.

The way Vue Router is instantiated has changed

It changed from this:

// create the router instance
const router = new VueRouter({
    routes
})

to this:

// create the router instance
const router = VueRouter.createRouter({
    // Provide the history implementation to use. We are using the hash history for simplicity here.
    history: VueRouter.createWebHashHistory(),
    routes, // short for `routes: routes`
})

The code above deals with two major changes: new VueRouter() has been replaced by VueRouter.createRouter(), and the new history option now replaces mode.

Visit the documentation for Vue Router 4 to find out more.

Finally, let's make our app aware that we are using Vue Router. If we injected the router instance in the Vue app, now we need to instruct it to use the Vue router, use the .use() method to do so, and pass to it the router instance.

Change from this:

// create and mount the Vue instance

const app = Vue.createApp({
    router
})
app.mount('#app')

to this:

// create and mount the Vue instance

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

And there you have it!

Conclusion

It doesn't really matter how complex your Vue application is – if you want to migrate to a new major release you will still need to plan for it, read the release notes, and go over all the breaking changes to make sure that you understand what will break.

The more complex the application is and more carefully you should plan your migration.

For our simple application that's all there is to do. But it's not always like that. So get ready and plan in advance.

If you enjoyed this guide please share the article and remember to subscribe to my YouTube channel. Thanks for reading!

In this free book, we will build two simple projects and deploy them on Netlify. We will use Vue.js as our front-end framework, and use different technologies to build our projects.

If you follow this tutorial to the end, you will build a simplified version of Twitter and a single page application for a portfolio using the GitHub API.

What you need to know to follow this tutorial

To follow along, you will need at least some basic knowledge of HTML, CSS, and JavaScript.

Knowledge of Vue.js isn't required, as you will learn the basics first and then we'll move into building the projects together.

At the end of each section, you'll find that information in video form via a YouTube link/embed. That way you can watch the videos to cement your knowledge of what you just read.

Table of Contents

• Introduction
• How to Install Vue
• How to Create a Vue Instance
• How to Work with Templates in Vue
• Vue Directives
• Methods
• Conditionals
• Loops
• How to handle user inputs with events Handling
• Two way model binding (v-model)
• Computed Properties and methods
• Project: Simple Twitter Clone
• Component basics
• Project Update: Simple Twitter clone with components
• Axios and RestAPI
• Routing with VueRouter
• Final Project: build a Portfolio with VueJS, VueRouter, Axios, GitHub API
• Deploy Continuous deployment with BitBucket and Netlify

Introduction

VueJS is a JavaScript framework that has become really popular in recent years.

In this guide, we will start by looking at the fundamentals first, with a quick look at two libraries: VueRouter and Axios. We will use them to build a cool portfolio project at the end.

Click to view the video on YouTube.

How to Install Vue

You can use Vue in your projects by installing it using a package manager like NPM or by using its CDN. If you've never used Vuejs before, I suggest that you use the CDN, as it will be easier if you want to code along with me.

Click to view the Repository

Click to view the YouTube-Video or find it at the end of this section to reinforce what you've learned.

The Vue CDN

For the CDN, we only need to include the script tag below inside our HTML file:

<!-- Development version for prototyping and learning -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Alternatively, you can use a production-ready script that uses a specific stable release, like this:

<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

In production, Vue suggests using the optimized version to replace vue.js with vue.min.js.

There is also an ES Modules-compatible build:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

How to Install Vue via NPM

If you plan to build large scale applications, I recommend installing via NPM like this:

npm install vue

As I said above, we will use the Vue CDN so that anyone can follow this guide. So our final HTML file will look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJS Tutorial</title>

    <!-- vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>



    <script src="./main.js"></script>
</body>
</html>

Let's break this code down. First, we've add a basic markup for an HTML file. Then we've included the script tag for the VueJs framework.

In the end, before closing the body tag, we've added our main.js script where we placed all the JavaScript code for our application.

Let's now move to the next step and add our first Vue instance inside the main.js file.

How to Create a Vue Instance

Once you've installed Vue or included it via its CDN, you can create a Vue instance. You can do that using the new Vue() function. This function accepts an object of options.

If you read the documentation, you will see that the vue instance is often stored inside a variable called vm, but you can call it anything you like. I'll call it app during this guide.

So now, inside the main.js file you need to create a variable and store in it the Vue instance like so:

let app = new Vue({
    // all options goes here
})

The object you pass to the Vue instance is called the options object. Inside the options object, you can add all the options described in the Vue API reference pages to build our application.

The options object has properties divided into multiple sections:

• Data
• DOM
• Life Cycle Hooks
• Assets
• Composition
• Misc categories

The first property that you need to build you Vue application is used to connect Vue with a root DOM element. Then you will need some data options to work with.

Let's start by connecting the Vue instance with a root DOM element.

You can click to view the Repository here.

And you can click to view the YouTube-Video or find it at the end of this section so you can review what you've learned.

Options/DOM: How to select the root DOM element

The Options/DOM API gives you an el property that you can use to select an existing DOM element that Vue will use to mount your application instance.

The el property accepts a string that contains a CSS selector for the element or directly a DOM element.

NOTE: Vue discourages using the body or HTML tags and suggests using a different element as a mounting point.

Let's do it. Inside the body of the index.html file, you need to put the following code:

    <div id="app">
    </div>

Now you have a root element that you can use to connect the Vue instance. Back inside the main.js file, let's select this element inside the options object.

You can now use the el property to select the element you created with an id of app.

let app = new Vue({
    // all options go here
    el: "#app",
})

You now have an element to work with. You can move on to the next step and add to the options object the data object.

You can read more about it in the documentation here:[https://vuejs.org/v2/api/#Options-DOM]

Options/Data: How to add the data object (or function when used in a component)

When a new instance is created, it adds all properties found in its data object to the Vue reactivity system. And when a value in the data object changes, the view will reflect these changes. This is at the base of the VueJS reactivity system.

To explain it, let's see a practical example.

Create a data object

Inside the main.js file you can create a data property that has an object as its value, like so:

let app = new Vue({
    // all options go here
    el: "#app",
    data: {}
})

The data object can be defined directly inside the Vue instance like in the code above, or outside the instance like in the code below.

let dataObject = {}
let app = new Vue({
    // all options go here
    el: "#app",
    data: dataObject
})

You can pick the one you like.

Add properties to the Data Object

Since VueJs is a JavaScript framework, it's helpful to remember that what you know about JavaScript is still valuable here.

Vue is just a JavaScript object that has a number of methods and properties that you can use to simplify and speed up your workflow.

Let's add some properties to the data object to see how it works.

// Create a data object
let app = new Vue({
    el:"#app",
    // create a vue instance, add the data property and the dataObject created
    data: {
        alert: "This is an alert message! ",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ];
    }
})

With the code above, you simply add two properties to the data object: an alert property and a projects property.

The alert property just a string while the projects property is an array of objects.

Now that you have some data to work with, let's see how you can access and modify their values.

Manipulate properties in the data object

You can access and manipulate the properties of a data object using the variable that contains the Vue instance app. Then you can reference the properties using dot notation, like app.alert.

In the browser, if you open the console you can see that when you write app you get the Vue instance object. So, like any other object with dot notation, you get its properties and methods.

Let's try this out inside the console:

// Access the alert property in the data object
app.alert // This is an alert message!
// update a data property value
app.alert = "This is a new alert message!" 
app.projects

The code above does three simple things:

• the first line accesses the alert property and prints its content "this is an alert message"
• the second line assigns a new value to the alert property with the equals operator
• finally, the third line returns the value of the projects array.

You can also access the entire data object using the shortcuts $data or _data

Back in the console:

// Access the entrie data object
app.$data // {__ob__: Observer} option 1
app._data // {__ob__: Observer} option 2

You can read more about this in the documentation here: [https://vuejs.org/v2/api/#Options-Data]

Options Data Methods

The Vue instance gives you access to a number of properties and methods. You can access default methods and properties using the $ sign. It is used to differentiate Vue defined methods from those defined by the user.

There are a number of instance methods and properties predefined and split into four different categories:

• Instance Properties
• Instance Methods / Data
• Instance Methods / Events
• Instance Methods/life cycle hooks

For instance, with the following code, you can get the data and options objects or access the watch or the on methods.

app.$data // returns the data object
app.$options // returns the options object
app.$watch() // function that watched for changes on the vue instance
app.$on() // listen for a custom event on the vue instance

I won't dive deeper into this since it's out of the scope of this guide. But if you are interested and want to learn more, here is the documentation.

Lifecycle Hooks

Vue gives you access to a series of functions called lifecycle hooks. They allow you to run code at specific stages of the Vue initialization steps.

Inside all lifecycle hooks you have access to their this variable that points to the Vue instance.

You will see how this works in more detail in future sections. But for now this is a short summary of the available hooks and what they let you do:

• beforeCreate (you can run code before the Vue instance is created)
• created (you can run code after the Vue instance is created )
• beforeMount (you can run code before your element is mounted to the DOM)
• mounted (you can run code when the element is mounted to the DOM)
• beforeUpdate (you can run code before values are updated in the DOM)
• updated (you can run code after values in the DOM have been updated)
• beforeDestroy (you can run code before an instance is destroyed)
• destroyed (you can run code when an instance is destroyed)

During the course, we will often use the mounted hook. If you are curious to learn more about this topic, I suggest you look at the diagram in the documentation first. Find the lifecycle Hooks diagram here.

How to Work with Templates in Vue

VueJS uses mustache syntax {{ }} to render data from the Vue instance inside the HTML element.

Using this syntax you can grab properties and methods defined in the Vue instance. The property is then parsed and rendered to the page.

You can click to view the Repository here.

And you can click to view the YouTube-Video here here, or find it at the end of this section to review what you've just learned.

Text Data binding

This is called text data binding. Let's see an example of how you can bind data between the Vue instance and your template file.

<div id="app">
    <h1>{{ title }}</h1>
</div>

The code above has an h1 tag inside the root element with an id of app we defined in the previous chapter.

Inside the h1 tag you use the double curly brackets syntax to render onto the page the value of a property in the data object called that you called title.

You don't have a title property yet inside your data object, so let's add it.

Inside the main.js file

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now, with the code above you can render the content of the property title inside the h1 tag in your template. The final result will be something like this:

<h1>John Doe portfolio</h1>

However, with this method, you can only pass a string. If you want to use HTML tags inside the string these will not be parsed but instead will be shown as simple strings.

For instance if you assign the following string to the title property

    title: "John Doe <span class='badge'>Portfolio</span>"

And then try to render it inside our HTML like so:

<h1 class="title">{{title}}</h1>

The property title will be rendered as a plain string including the HTML tags ie. John Doe <span class='badge'>Portfolio</span>

Of course you can parse HTML too.

How to parse raw HTML

To render a raw HTML element we need to introduce another important Vue concept called directives.

In this case, you will use the v-html directive inside your HTML tag as an attribute and pass to it the property title.

When you're using Vue directives, the text inside the quotes is considered a JavaScript expression. This means that it's computed and its result is rendered.

Let's create a separate property for the title with HTML tags inside so that you can see how both render onto the page.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now inside your HTML file, you will use this {{}} syntax to render the property title. But on the tag where you want to render raw HTML, with the titleHTML property, you use the v-html directive instead.

<div id="app">
    <div class="title">{{ title }}</div>
    <div v-html="titleHTML"></div>
</div>

Both elements will now render correctly including the second property that has HTML tags inside.

NOTE: Rendering HTML can expose XSS vulnerabilities. Never use this approach on user-provided content.

Now that you know how to render data onto the page, let's dig deeper into directives.

If you want to read more, visit the documentation here.

Vue Directives

Inside your HTML files, you can use directives to interact with HTML attributes. A directive applies effects to the DOM when its expression changes.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

The v-bind directive on HTML attributes

So far, you have used the {{}} syntax to render something between HTML opening and closing tags. But inside an HTML tag you cannot use the {{ }} syntax.

So how do you connect an HTML attribute to the Vue instance? You use the v-bind directive instead which lets you access data object properties as you have done before.

The v-bind directive is one of the directives that take arguments which are specified after the colon. In our case here, what's specified after the colon is the HTML attribute name like id, class, href, src and so on.

If you need to dynamically assign an attribute like href or even a class, you can bind it with the Vue instance using the v-bind directive. It will then be able to get what's in the options object, like properties in the data object.

Let's see v-bind in action and start connecting the id and class attributes so you can assign them values dynamically with Vue.

Inside our index.html file:

<div id="app">
    <div v-bind:class="dynamicClass" v-bind:id="dynamicId">Dinamically assign a class and an id to the div</div>
</div>

Let's break the code above and see what it's doing.

First, you have a div tag inside the root element. Then you use the v-bind directive on the class and the id attributes.

Inside the quotes, you specify two properties that later you'll define inside the data object of your Vue instance.

Remember that when using Vue directives the content between quotes is treated as a JavaScript expression.

Let's define these two properties inside the Vue instance.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],
        dynamicId : "projects_section",
        dynamicClass : "projects"
    }
})

So you have defined dinamicId: "projects_section" and dynmicClass: "projects" properties and assigned them two values.

Thanks to the data binding on the attributes, your HTML tag will be rendered as follows (and you can now dynamically change your attributes values and see them change reactively):

<div id="projects_section" class="projects">Dynamically assign a class and an id to the div</div>

V-bind with Boolean values

With attributes using a boolean value, the v-bind directive works differently. It will show the attribute only if the property's value is true. In all other cases, it won't render the attribute and its content.

For the next example, you will use a button with the disabled attribute.

Inside your root HTML element:

    <div id="app">
        <button v-bind:disabled="disabled">You can't click this button</button>
    </div>

Inside a Vue instance:

let app = new Vue({
    el: '#app',
    data: {
    //disabled: false, // wont render the attribute
    //disabled: null, // wont render the attribute
    //disabled: undefined, // wont render the attribute
    disabled: true // renders the attribute
}
})

Only if the disabled property is set to true does the attribute become visible and render its property content.

    <button disabled>You can't click this button</button>

This is something to keep in mind when working with such attributes.

Another thing to consider is that bindings can include a single JavaScript expression, with some restrictions:

• only expressions are allowed
• only a single expression
• no statements
• no flow control tools, but the ternary operator works.

If you want to read more, visit the documentation here:[https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions]

So far we have seen only two Vue directives, v-html and v-bind. But there are a number of directives available, and here are some more (to list just a few):

• v-html
• v-bind
• v-if
• v-else-if
• v-else
• v-for
• v-on All directives have a v- prefix, but there is shorthand for v-bind (:) and v-on (@).

They work in the same way. Here's a quick reference for the v-bind and v-on directives:

<!-- Long syntax -->
<a v-bind:href="url">Some link</a>
<!-- Shot syntax -->
<a :href="url">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-bind:[attribute_name]="url">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a :[attribute_name]="url">Some link</a>

Shorthand for v-on

<!-- Long syntax -->
<a v-on:click="runFunction">Some link</a>
<!-- Shot syntax -->
<a @click="runFunction">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-on:[attribute_name]="runFunction">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a @:[attribute_name]="runFunction">Some link</a>

Now let's see what dynamic arguments are and how they work.

Dynamic arguments in Vue

Directives have been able to have dynamic arguments since Vue 2.6.0. You can use a JavaScript expression in the directive argument if you wrap it inside square brackets.

But there are some restrictions:

• expressions should evaluate to a string
• spaces and quotes are invalid

Let's see a practical example

    <a v-bind:[attribute_name]="url">Visit my Website</a>

Inside your data object you can define the directive arguments as if they were properties, where the property value is the name of your HTML attribute like hef in the following example:

let app = new Vue({
    el: '#app',
    data: {
        attribute_name: 'href',
        url: 'https://fabiopacifici.com'
    }
})

The code above renders the attribute name href and its value dynamically when you bind it using the v-bind directive.

The result will be this:

<a href="https://fabiopacifici.com">Visit my Website</a>

Dynamic events in Vue

You can apply the same concept to event directives like v-on. This directive does the job of the JavaScript event listener.

v-on accepts an argument like click, for example v-on:click="doSomething".

To apply the concept of dynamicity, let's create a v-on directive and use the square brackets after it to specify a dynamic event.

Inside the index.html file you will place the following code:

    <div id="app">
        <a v-on:[event_name]="runFunction">Some link</a>
    </div>

Let's break down the code above.

First you have your root element, the div with an id of app. Inside the root element you add an anchor tag <a>Some link</a>.

The anchor tag has a v-on directive in it. After the directive you specify a dynamic argument v-on:[event_name] where event_name will be a property inside your Vue instance that you can change as you need.

The v-on directive works like any event listener, so between quotes you need to specify the name of the function that you want to run when the event is triggered, therefore runFunction.

Now, inside your main.js file:

let app = new Vue({
    el: '#app',
    data: {
    event_name: "click"
    },
    methods: {
        runFunction() {
            console.log("test click function");
        }
    }
})

Let's review what the code above does.

First, you create the Vue instance. Then you add the event_name property inside the data object and you assign to it a value of click. This is the event you will listen for.

Finally, we said that the v-on directive runs a function when the event is triggered, therefore you need to write a method inside your Vue instance. So inside the methods object, create a new function called runFunction that will simply output a message inside the console.

The power of dynamic events is clear when you replace the value of the event_name property with a different event name.

Methods in Vue

So far we've learned how to bind data using the v-bind directive inside your template. In the next section, you will learn more directives – but before diving into that, let's quickly talk about how to store your functions.

You can check out the Repository here

And you can see the video version of this section on YouTube if you want to review what you learn.

Since you are working in a big object, the Vue instance function will take the name of the methods. And as you might guess, the Options object has a property called methods where you can store your functions as you do for your data.

Inside your Vue instance, define a method that you can call anything you like – just remember to use a naming convention that clearly describes your code.

let app = new Vue({
    el: '#app',
    data: {
        firstName: "Fabio",
        lastName: "Pacific" 
    },
    methods: {
        // es6 syntax
        getFullName(){
            return this.firstName + " " + this.lastName;
        }
        // es5 syntax
    /* getFullName: function(){

        } */
    }
});

In the code above, you created a method inside the methods object. You called it getFullName. Inside a method, you have access to the this keyword that refers to the object instance, so you can use it to access from a method the properties stored in the data object.

When you call the method getFullName the method will return a single string that contains both the first and the last name.

Now inside your HTML file, you can simply call the method as you did when you needed to access properties in the data object {{ getFullName() }}

<div>{{ getFullName() }}</div>

Now that you know how to create a method and where to put it in the Vue instance, let's move forward and learn more about directives.

Conditionals in Vue (v-if/v-else-if/v-else/v-show)

Now it's time to learn more about directives. We will start by looking at how conditionals work in VueJS. The first directive of this section is the v-if, which allows you to render blocks of code based on a certain condition.

You can click to view the Repository here.

And you can click to view the video on YouTube here or use it to review at the end of the section.

Like the if-else statements in vanilla JavaScript, the v-if will check if the returned value of a conditional expression evaluates to true. If so it will render the HTML element and everything you place inside it.

Since it's a directive, it works on a single element (HTML tag). If you want to extend its behaviour on multiple elements, then you need to wrap them inside a <template> tag.

The v-if directive works in the same way as the v-bind directive works: it has access to the properties in the data object and accepts an expression between its quotes.

If the returned value of the expression or the value of the data property you use evaluates to true, then the directive renders the HTML element. Otherwise it doesn't.

Of course, you can check for multiple conditions and end up rendering an element if none of these evaluates to true. You do that using v-if together with the v-else-if and v-else directives.

Let's see a simple example and write some code inside your main.js file to show or hide an element.

The first thing to note is that if you have a property that returns a boolean value, it is enough to use it inside the v-if directive to show/hide an element, like so:

<h1 v-if="showTitle">{{movieTitle}}</h1>

And a vue instance with a showTitle property set to true.

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        showTitle: true,
    }
})

In such a case, you are saying show the title property only if the value of showTitle is true. If you change it to false, the title won't show.

You can put a simple expression inside the quotes of a v-if directive that once computed evaluates to a boolean.

<h2 v-if="age >= 18">{{movieTitle}}</h2>

Inside your main.js file

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: 18,
    }
})

In the code above we wrote an expression on the v-if directive that checks if the age property is greater than or equal to 18. If the result is true then the h2 will be shown onto the page.

Now let's move to a more complex example and add another condition using the v-else-if.

v-if/v-else-if

In the following example, you will first create a v-if condition similar to the one above – but this time you'll check if the user is over 18 but under 21 using the && operator.

If true, then you'll show the time with an additional note. If false, and the user is over 21, then we will simply show the title of the movie.

<h2 v-if="age > 21">{{movieTitle}}</h2>
<h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>

Inside the Vue instance you could have an age property. But to make your simple program dynamic, you can instead use a prompt to ask the user their age.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

So the code here first asks the user their age, then stores the result as a number inside the variable userAge.

You'll later use the userAge variable inside the data object to assign a value to the age property so that based on its value you will render one element or the other.

Let's move forward and use the v-else directive to show a different message in case the user is under 18.

v-else directive:

The v-else directive works differently. You don't have to pass it anything. It simply enters into action when none of the previous conditions evaluate to a true value.

So the new HTML element is fairly simple:

    <div id="app">
        <h2 v-if="age > 21">{{movieTitle}}</h2>
        <h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>
        <p v-else> Sorry You are too young to see this movie</p>
    </div>

Here we have a p tag with a v-else directive attached. As you can see, it looks like an attribute without values (like the disabled or required HTML attributes).

Your JavaScript file has not changed.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

That's all you need to know about conditional rendering to be able to move forward with your first project. But if you want to learn more, here is the documentation: [https://vuejs.org/v2/guide/conditional.html]

You need to learn a few more things before you'll be able to build your first project, which is a simplified Twitter clone. The next topic is about Loops.

Loops in Vue

Let's go back to the previous example and learn how to use the v-for directive to output each project of the array onto the page.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

For our next task, it would be useful if we could use a loop, and the v-for directive is here to help.

Its syntax doesn't have much in common with a classic for loop in JavaScript, but rather with a Python for in loop or with the for in JavaScript loop used to iterate over objects.

With this directive, you specify the elements of the array and the single element between quotes using the syntax project in projects. Here, projects are the property inside the data object that contains an array of objects, and project is the single element of the array.

You can call this as you like, but keep in mind that what follows the in keyword must be an iterable from your data object while what comes before can be anything you like to refer to each element of the iterable.

In your case, project seems the most appropriate choice since you have an array of projects.

Your JavaScript file will look like this:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

Now inside the HTML file, let's use the v-for to render the title of each project.

    <div id="app">
        <h1>{{name}} {{title}}</h1>
        <ul>
            <li v-for="project in projects">{{project.title}}</li>
        </ul>
    </div>

In the code above, you used {{name}} {{title}} to render the main title for your portfolio. Then you used the v-for directive and specified inside the quests that you want to assign each element of the iteration to a project variable v-for="project in projects".

Now on each iteration, the project variable holds an object from which you can retrieve its properties using dot notation like so: {{ project.title }}.

One thing to note is that the v-for directive also gives you access to the index of the element at each iteration. You can store it in a variable as you did with the single element you called project.

To do that, you need to wrap them between parentheses and separate the element and its index with a comma, like so v-for="(project, index) in projects".

Also, note that when working with objects Vue can show an alert to inform you that the use of a key is recommended. This means that it expects a key to identify each element when it's rendered.

You can do this using the key attribute and bind it, for instance to an id property on the object or to another different property, like so

<div id="app">
    <h1>{{name}} {{title}}</h1>
    <ul>
        <li v-for="project in projects" :key="project.title">{{project.title}}</li>
    </ul>
</div>

Here you used the v-bind shorthand directive to bind the key attribute to the project.id property if it exists or to another property if not.

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

v-for can also be used to iterate over objects. In such a case, you have access to the value, the key, and also the index like so v-for="(value, key, index) in object" where 'object' is a property in the data object.

If you want to learn more, visit the documentation here: [https://vuejs.org/v2/guide/list.html]

Let's now move on to another important feature of Vue: how to handle user inputs and events.

How to Handle User Input with Event Handling (v-on) in Vue

To make the application react to a user's input, Vue provides a straightforward directive called v-on. This is one of the directives that accepts arguments, similar to the v-bind directive.

With such a directive, it's easy to listen for events triggered by a user.

The v-on directive lets you run a function that executes a block of code when the user performs an action, like when they click on a button, hover on an element, or press a specific key on the keyboard.

You can check out the Repository here.

And you can view the video on YouTube here or at the end of this section to review what you've learned.

V-on Syntax and Events

There are two types of syntax we can use, the long-form or the short. They're equivalent, so pick the one you prefer. What follows is just a representation of the syntax, and I'll explain it in detail in a minute.

Long syntax: v-on:EventName='doSomething' Shot syntax: @EventName='doSomething'

There are many events you can listen to, such as:

• click
• submit
• mouseover
• mouseenter
• mouseleave
• keyup
• keydown
• keypress

But you can also create custom events (which you will see when you reach the components section).

Let's pick the long-form syntax: v-on:EventName='doSomething. I'll explain it more now.

First, you have the directive v-on. Then you have an argument that is the event name you want to listen for, like click. After that, the doSomething can be any method that you have defined inside the methods object of the Vue instance.

This method is like any other function that you define inside a JavaScript object. It can have parameters or not. If it has them, you can call the method and pass parameters to it as usual like this: doSomething(param, param_2, param3).

You can have something like this <div v-on:click="likeProject">Like</div> and when the user clicks on this element, it will trigger a method and run some code to increase a like counter inside a project.

Let's first create the HTML you need for that:

<div class="projects" v-for="(project,index) in projects">
    <h1>{{project.title.toUpperCase()}}</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <div>Like
        <i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index)">
        </i>
        {{project.likes}}
    </div>
</div>

In the code here, first you'll use the v-for directive to loop over the array of projects. Note that you should use the syntax (project, index) in projects because you will need to pass the index to the like method that you defined earlier.

After that, you output some data onto the page (like the project name in uppercase letters) then the description, and a div tag with an icon for the likes (remember to add font awesome to get the icon).

On the heart icon, add the directive v-on using the short syntax @click="likeProject(index)" between quotes that you used to invoke your likeProject(index) method. Then pass to it the index as a parameter so you can find the current project the user clicked on.

Finally, you'll render the likes onto the page for the current project using the {{project.likes}} syntax.

Now it's time to go in the Vue instance and write your method.

let app = new Vue({
    el:"#app",
    data: {
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
            likeProject(index){
                const project = this.projects[index]
                project.likes++
                console.log(project.likes)
            }

    }
});

As I said earlier, you needed to define a method to call when the user clicks on a link. So you create the likeProject method, which accepts a parameter that will be the index of the element the user clicked on.

You can then add a likes property inside your projects array and access it for the current project to increment its value every time the user clicks on your link.

How to access the original event

If for any reason you need to access the original DOM event, you could have used the special $event variable inside the method like this on the v-on directive: doSomething(param1, param2, $event). Let's see an example of that now.

You need to add the special variable in the method call on your v-on directive like so:

<i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index, $event)">
        </i>

Then you can access the original event inside your method like so:

likeProject(index, event){
    console.log(event); // get the original event
    const project = this.projects[index]
    project.likes++
    console.log(project.likes)
}

Now that you know how the v-on directive works, let's improve our Likes example and put something more in it. We will use key modifiers in the next example, so let's quickly see what they are and what you can do with them.

Event Modifiers in Vue

With events, Vue provides access to a number of Event modifiers. They are divided into 4 main groups. You can add these modifiers to a directive to change the way your event behaves. They are like postfix and you can chain them using dot notation.

Below there is a quick reference.

Categories:

• event modifiers
• key modifiers
• system modifiers keys
• mouse buttons modifiers

Event Modifiers: .stop .prevent .capture .self .once .passive

Key Modifiers: You can add these modifiers to the @keyup listener to listen for when these keys are pressed or use them as a combination with the @click event to listen for a click+space, for example. @click.enter="doSomething"

.enter .tab .delete (captures both “Delete” and “Backspace” keys) .esc .space .up .down .left .right

System modifiers: With these modifiers, you can trigger mouse or keyboard event listeners when the corresponding key is pressed. .ctrl .alt .shift .meta .exact (allows control of the exact combination of system modifiers needed to trigger an event)

Mouse buttons modifiers: These modifiers allow you to trigger a mouse event listener if the corresponding mouse button is clicked.

.left .right .middle

If you want to learn more, read the docs here.

How to like a project with key modifiers

In the previous example, you used the v-on:click directive to trigger a mouse event listener that aimed to simulate a like on a project.

But the user was able to add as many likes they wanted by clicking on the icon.

In the next example, you will do things a bit differently.

• First, you will prevent the user from adding more than one like to each project,
• Then you will let the user remove a like
• Finally, you will keep the likes on the page even after the user refreshes the page.

Let's get started. This time you will use mouse button modifiers to listen for clicks. The left mouse button click will trigger the add like behaviour and the right mouse button click will trigger the remove behaviour.

Inside your HTML file:

<div id="app">

    <!-- Users can like a project with a left click and dislike it with right click -->

        <div class="projects" v-for="project in projects">
            <h1>{{project.title.toUpperCase()}}</h1>
            <p>Lorem ipsum dolor sit amet.</p>
            <div>Like 
                <i class="fas fa-heart fa-lg fa-fw" 
                    @click.left="addLike(project)" 
                    @click.right="removeLike(project, $event)">
                </i> 
               {{project.likes}}
            </div>
        </div>


</div>

In the code above you have taken what you had before and simply added a left mouse button key modifier to the click event @click.left. Then you invoked the addLike method. This will make your project like counter increase by one as we have seen before.

Then you added another event listener to the same element, but this time you used the .right mouse button key modifier to listen when the user clicks on our icon using the right button @click.right="removeLike()".

In the remove like method, you have also passed the special variable $event so that you can use the original event later in your method to prevent its default behaviour and open the contextual menu.

But we said earlier that you can also chain key modifiers and indeed there is a .prevent key modifier that you can use here instead of the $event variable. You could do the same like this: @click.right.prevent="removeLike(project)"

Let's see how to structure your main.js file:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
    methods: {
        addLike(project){
           console.log(project)  
        },
        removeLike(project, event){
            console.log(project)
            console.log(event)
        }
    }

});

So in the data object, you have a projects property that is an array of objects. Each object has a likes property that you will increment or decrement depending on what mouse button the user clicks.

Inside the methods object, you created the two methods you referenced in your v-on directives addLike() and removeLike(). For now, you are only logging to the console the project parameter value and the event value. You will implement the logic in a minute.

Let's start with the add likes method – it could look like this:

addLike(project){
    const projectTitle = project.title;
    if(!localStorage.getItem(projectTitle)) {
        project.likes++;
        localStorage.setItem(projectTitle, true);
    }              
}

There are a few things going on here. In the first line, you're storing the project title inside the projectTitle variable. Then, you said you wanted data to persist if you refresh the page so you are using the localStorage API to store information inside the client browser.

You increment the likes count by one, but you do that depending on a value inside the local storage.

You can do this by first checking to see if there is a key in the localStorage matching your project title, if(!localStorage.getItem(projectTitle)).

If this evaluates to false, then you will run the code inside the if block and first increment the likes project.likes++.

Second, use the .setItem() method of the local storage API to set a key-value pair with the project title as the key and a boolean value as its value localStorage.setItem(projectTitle, true).

To put an item in the local storage, you'll use localStorage.setItem(). The set item method accepts a key-value pair. Your key will be the title you saved in the variable projectTitle and the value will the boolean value true.

Now let's see if this works.

removeLike(project, event){
    event.preventDefault(); // This can be omitted if we use the prevent key modifier
    const projectTitle = project.title;
    if(project.likes > 0 && localStorage.getItem(projectTitle)) {
        project.likes--;
        localStorage.removeItem(projectTitle);
    }
}

This function does the opposite of the previous. When the user clicks their right mouse button, the method removeLikes() is executed and you do the following:

First things first, you need to prevent its default behaviour. Otherwise when the user right-clicks on the icon, the contextual menu will pop up and we don't want that. So, you'll use the event.preventDefault() method on the original event that is represented by the event parameter on your method.

Alternatively, you can omit this if you use the prevent key modifier in the v-on directive @click.right.prevent="removeLike(project).

The next step is to grab the project title. Since you also passed a parameter to the method to represent the current project object removeLike(project, event), you can store the project title in a variable projectTitle.

Then you need to make a couple of checks. First, you want to decrement the likes only if its value is greater than zero. Then you want to make sure the project title is in the local storage as a key with a value.

So, in your condition, you have done both checks if(project.likes > 0 && localStorage.getItem(projectTitle)). Now, if both conditions evaluate to true, the code inside the if block can run.

First you remove the like by decrementing its value project.likes--. Then you remove the project title from the local storage using the removeItem method and pass to it the key you want to remove (which is the project title localStorage.removeItem(projectTitle)).

To put it all together, you should now have the following code:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
        addLike(project)
        {
            //console.log(project, "like");
            const projectTitle = project.title;
            // check if the current project is not in the local storage
            if(!localStorage.getItem(projectTitle)) {
                // set the item in the storage and increase the likes counter
                project.likes++;
                localStorage.setItem(projectTitle, true);
            }

        },
        removeLike(project){ 
            const projectTitle = project.title;
            console.log(project, "dislike");  
            if(project.likes > 0 && Boolean(localStorage.getItem(projectTitle))) {
                project.likes--;
                localStorage.removeItem(projectTitle);
            }

        }
    },
    mounted(){
        this.projects.forEach(project => {
            if(localStorage.getItem(project.title) !== null) {
                project.likes = 1; 
            }
        });
    }

});

To make the code work, you also need to add a life cycle hook called mounted. This will let you run code when the root element is mounted on the Vue instance. With it, you can check if the localStorage has a key corresponding to your project title and if so, update the value of the likes counter.

And your HTML is still the same:

<div id="app">
    <!-- Users can like a project with a left click and dislike it with right click -->

    <div class="projects" v-for="project in projects">
        <h1>{{project.title.toUpperCase()}}</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <div>Like 
            <i class="fas fa-heart fa-lg fa-fw" 
                @click.left="addLike(project)" 
                @click.right="removeLike(project, $event)">
            </i> 
            {{project.likes}}
        </div>
    </div>
</div>

Remember that you can get rid of the $event variable passed to the removeLike method by using the event key modifier like so: @click.right.prevent="removeLike(project)"

You have learned a lot so far! And now that you have seen key modifiers in action, we can move forward to the next topic: two-way model binding and the v-model directive. Then we'll start building our Twitter clone.

Two Way Model Binding (v-model) in Vue

All right, so far we have seen how to bind properties from the data object to our HTML tags and inside attributes, how to loop over a sequence of elements and, how to display conditionally elements onto our template with conditionals.

We have covered how to define methods inside the methods object so that we can perform more complex operations on our data and, we have learned how to work with events using the v-on directive.

In the next section, we will look at how Vue opens a two-way communication channel between a form's input and, a property defined inside the data object. Then we will use this knowledge to build our first project together.

You can check out the Repositoy here.

And you can view the video on YouTube here or at the end of the section if you want to review what you've learned.

How does the v-model directive work?

The v-model is another Vue directive. You can use it out of the box, and it's useful to simplify the way an input tag can communicate with a Vue instance's property in the data object.

It works like all the other directives. The main difference is that when it's implemented, your application will listen for changes inside the input with this v-model directive and update the attached property's value immediately inside the data object and vice-versa.

It is effectively a two-way communication channel between your template and the Vue instance. It's the Vue way to interact with user input and simplify your life as a developer.

Let's look at a straightforward example.

How to use the v-model on an input tag

First, you need an input tag inside the element you defined as the root element in the Vue instance, the div with an id of app.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
</div>

In the HTML you have an input tag, which has the v-model directive attached to it as an HTML attribute. Anything between quotes is computed as a JavaScript expression, so you write the name of a property tweet that you will create inside the Vue data object.

So let's do it.

let app = new Vue({
    el: '#app',
    data: {
        tweet: ""
    }
});

So now you have a Vue instance and, in it, you have a data object with a tweet property that has an empty string as its value.

If you open the console and inspect the Vue element, you can see the two-way data binding in action.

By changing the value of the tweet property, you will immediately update the value inside the input tag and vice-versa.

You have this tweet property in the data object and you already know how to render its content onto the page. So now you can update your markup and add a paragraph under the input tag to see the value dynamically changing while you type.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
    <p>{{tweet}}<p>
</div>

How cool is that? Now you can see the tweet property changing in real-time as you type.

That's the two-way data binding. If you change the content of the tweet property directly it will be reflected in your template, too.

If you want to learn more, make sure to read the official Documentation too.

How to build a tweet box

Now, let's raise the bar a little and build something together.

• We will create a simple textarea with a submit button,
• We will display the number of characters the user has left while they are typing so that they can submit the form without exceeding the max number of characters allowed.
• Like in a tweet, the maximum number of characters will be 200.

How to define the initial markup

Now you need to define a markup. So inside our index.html file, write the following code:

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->

    </form>
    <!-- More code here -->
</div>

First you have first created your root element for the Vue instance so that it can monitor the markup and do its magic.

Then you created a form tag with an event listener using the directive v-on, which listens for the submit event and runs a function submitData that you still have to create.

You also added the .prevent modifier so that the page doesn't refresh when you submit the form.

How to define the Vue instance and methods

Let's define our Vue instance and create the submitData method so that you can use it later when you need it.

let app = new Vue({
    el: '#app',
    data: {
        // data object props here
    },

    methods: {
          submitData(){
             // Code here
        }
    },

});

How to add a text area and a submit button

Now back to the HTML: let's add the text area inside your form.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet" maxlength="200"></textarea>

        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- More code here -->
</div>

Inside the form tag, you create a label and a textarea for your tweet box. On the textarea you use the directive v-model to bind the textarea value to a tweet property and vice-versa. So now when one changes the other changes, too.

NOTE: The v-model directive is used on form elements like inputs, text areas, check box, and more.

After the textarea you put a button of type submit so that when a user clicks it the form's data are sent to your application's submitData() method and you can process them.

How to add properties to the Vue instance

Now inside your JavaScript file, you need to create the tweet property in the data object and do something with this information so that you can later show a list of tweets sent.

We also said that we want to limit the characters to 200 and show an error when they're in excess.

So let's add a few more properties here like:

• tweet for the current tweet message that the user inputs in the text area
• tweets for the list of tweets
• max_length for the characters limit

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
    },

    methods: {
          submitData(){
              /* Handle the tweet */
        }
    },

});

So now with the tweets property as an array and using the two-day binding between the tweet property and the textarea, you can push all tweets inside the tweets array when the user submits the form by triggering the submitData method.

How to implement the character counter

Before implementing the submitData method, you can show a character counter while the user types in the textarea.

Let's implement this feature so the user knows if they can submit the tweet or not.

Back in the HTML file, you can add a div with a couple of span elements and use a v-if directive to check the length of the character. It'll show the counter while the user is within the characters limit, otherwise it'll show an error message.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>        
        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- Show character limits here -->
    <div>
        <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
        </span>
        <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>
    </div>

</div>

The code above uses two-way data binding between the tweet property and the textarea to find out if the user has reached the character limit that you defined as the max_lenght property.

Since the tweet property is connected to the textarea, you can use the v-if directive combined with the tweet.length and the max_length properties to make the comparison.

Now, every time the user types something in the textarea, the string saved in the tweet property increases by one character. Then you can use the .length property to see how long the whole string is and compare it against your max_length property.

You use the directive v-if="tweet.length <= max_length" to make your comparison. When this comparison returns true, the user will see the span tag with its content, the counter.

Inside the span tag, you used the moustache syntax to show the user the current length of the property tweet and the character limit.

<span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}</span>

After the v-if directive, a v-else directive handles the error message that you show to the user when there are no characters left to use.

Here the content of the span element shows a message that tells how many characters there are in excess by subtracting the tweet length from the max_lenght property.

<span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

How to submit the form

All that's left is to add the tweet to the list of tweets and show them on the page when the user submits the form.

Let's complete the submitData method so that every time it's executed it pushes a new object to the tweets array.

Inside the methods object the submitData methods now looks like this:

 submitData(){
    if (this.tweet.length <= this.max_length) {
        this.tweets.unshift(this.tweet);
        this.tweet = "";
    } 
}

The method above first checks if the length of the tweet property is less than or equal to the max_length property. If the condition evaluates to true, then you can add the tweet content to the array using the unshift method (which adds it to the beginning of the array).

Finally, you need to clear the value of the tweet property. You can do this by assigning to it an empty string again.

NOTE that since you are inside a method, you need to use the this keyword to grab properties and eventually methods inside the Vue instance.

How to show a list of tweets

Now, you can also show a list of tweets in your template.

To do that you will use a v-for directive and loop over the tweets array to show each tweet.

<ul>
    <li v-for="text in tweets">{{text}}</li>
</ul>

Put it all together

The final code now looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJs v-model</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Fontawesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- VueJS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app" class="container">

        <h2>What do you wanna tweet about today</h2>

        <!-- Tweet form -->
        <form v-on:submit.prevent="submitData">

            <div class="form-group">
                <label>Tweet</label>
                <textarea class="form-control" cols="30" rows="5" v-model="tweet"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">Tweet</button>
        </form>

        <!-- Alert the user  -->
        <div class="my-3">
            <span v-if="tweet.length < max_length">
                {{ ` Max: ${tweet.length} of ${max_length} characters` }}
            </span>
            <span class="alert alert-danger" v-else> {{ `Max char limit reached! excess characters: ${max_length -
                tweet.length} ` }}</span>

        </div>

        <!-- Tweets message -->
        <ul>

            <li v-for="tweet in tweets">
                {{tweet}}
            </li>
        </ul>

    </div>

    <script src="./main.js"></script>

</body>

</html>

Our final javascript file

let app = new Vue({
    el: '#app',
    data: {
        tweet: "",
        tweets: [],
        max_length: 200        
    }, 
    methods: {
        submitData(){
            // Handle the tweet submission
            if(this.tweet.length <= this.max_length){
                this.tweets.unshift(this.tweet);
                this.tweet = "";
            }
        }
    }
})

Improvements you can make

If you take this bit of code from your index.html file, there is something you can do to clean up our code...

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

To clean this template file, we can follow two approaches that are exactly the same, except that one is cached and the other one isn't.

• Computed Properties (cached)
• Methods (not cached)

In the next section, we will learn what computed properties are and how they differ from methods.

Computed Properties and methods

You should use computed properties instead of in-template expressions for complex logic that has the scope of changing the presentation of our data, not the data itself.

If we need to change the data, then you should use methods instead. Computed properties are cached based on their dependencies, meaning that it will re-evaluate only when its dependencies have changed.

With computed properties, the result of the previously run function is returned if the dependencies have not changed.

You can view the repository here and watch the video on YouTube here. The video is also listed at the end of this section so you can review what you've learned.

In the following example, we will use computed properties but we could also use methods. Generally speaking, we use computed properties when we have an expensive operation that we want to execute and cache so that the next time we don't have to run it again unless something has changed.

Let's implement a computed property for the following messages. Our HTML file will now change from this:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

to this much cleaner version:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage}}</span>

</div>

We have replaced the contents of both spans with two new properties that will be placed as methods inside our computed object.

Now inside our Vue instance, we will create a new object called computed where we will define two methods that will return the messages we had before.

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

The first method maxCharsText returns exactly the same string we had before inside our HTML file. The only difference is that we are using the keyword this to reference the properties we needed to grab inside the Vue instance this.tweet.length and this.max_length.

The second method works in the exact same way and it also uses the keyword this to pick the properties defined in the Vue instance this.max_length and this.tweet.length.

All together

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>

        </div>

        <button type="submit">Next</button>

    </form>

    <div>
        <span v-if="tweet.length < max_length"> {{ maxCharsText }}
        </span>
        <span class="errorMessage" v-else>{{errorMessage}}</span>

    </div>
    <ul>
        <li v-for="text in tweets">{{text}}</li>
    </ul>
</div>

JavaScript file

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

If we want to use methods instead of computed properties, we can simply move both methods from the computed object inside the methods object and invoke them with parenthesis inside our HTML file like so:

<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText() }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage() }}</span>

</div>

Just remember that computed properties are cached while methods are not. If you want to learn more make sure to read the official documentation.

How to Create a Simple Twitter Clone

Now, let's put together everything we've learned so far and and build our very first project. It will be a minimalist and simplified twitter-like web application.

We want to create a simple application that has some kind of registration form, a box to add new tweets, and a section where we can show all tweets. We also want to be able to remove tweets.

All data must be persistent so that after the page is refreshed the list of tweets is still visible while the registration form will be hidden.

You can watch the video on YouTube here or at the end of this section if you want to review.

You can also view the repository here.

Define our tasks

Let's break this down into large tasks first. Then we will see what we need to do to complete each one.

• create a registration form
• create a tweets box form
• create a tweets section

To do our project we need to research what tools we need to use to achieve our goals, so lets put them down:

• VueJS (application logic)
• localStorage (make data persistent)
• font awesome (icons)

This application has no database so we are unable to record multiple users and their tweets. It's just a proof of concept, something we build to use our new knowledge.

Create the project structure

Now that we know what to do, let's start by creating our project structure and importing the tools we need to complete the first task, the registration form.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple tweetter clone</title>
    <!-- CDN Fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

    <!-- VueJS development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Style sheet -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <!-- Register an account -->

    <!-- Add a tweet -->

    <!-- Show all tweets -->

</div>
<!-- Link our main.js file -->
<script src="./main.js"></script>
</body>

</html>

Now that our HTML file is ready, let's create the main.js file and create a Vue instance.

let app = new Vue({
    el: '#app',
    data: {

    },
    methods: {

    }

});

Finally, we need to create a style.css file that we will place for now in the root folder of our project.

We will use a CSS file that I have already written, and you can download it from here.

OK, our basic structure is ready to go. Inside our HTML file, we have some comments that reflect our 3 main tasks: create a registration form, create an add tweet box and, show a list of tweets.

Let's start with the first task and simulate a registration form.

How to simulate a registration form - HTML

Inside the root element <div id="app"></div> we need to create a registration form with the following fields: name, email, password, and a submit button. The form is contained in a card so we will wrap everything in a div and assign to it a card class.

The form won't submit data to a server, but will simply simulate a registration and update some property in the data object of the Vue instance.

We will place the following code inside our HTML file:

<!-- Register an account -->
<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>

    <h2>Create your account</h2>
    <form v-on:submit.prevent="registerAccount">
        <div class="form_group">
            <label for="name">Name</label>
            <input type="text" v-model="name" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="email">Email</label>
            <input type="email" v-model="email" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="password">Password</label>
            <input type="password" v-model="password" maxlength="16" required>
        </div>
        <button type="submit">Register</button>
    </form>

</div>

Let's break this down. First, the form tag has a v-on directive with a submit argument so it will listen for a submit event. It also has an event modifier .prevent so when we hit the submit button the page doesn't refresh.

Inside the v-on directive there is a method called registerAccount that we need to create inside the methods of the Vue instance.

Inside the form, we have the three input fields: name, email, and password with labels. We wrapped each field inside a div with a class of form_group. Later we can replicate the style of the Twitter registration fields and show a character counter.

Each input field has a v-model directive that binds the input to its data property.

How to simulate a registration form - Vue

Let's move on to the Vue instance to make the binding between the form and the data object properties.

Here we also need a place where we can store the details that the user submits so we will create another property for that.

Looking at the input fields, we also put a maxlength property on them, which is 25 for the name and email and 16 for the password.

Like we did previously when we learned about the v-model, we can create a property for these limits so that we can use it to show the user how many characters the user has left.

The Vue instance will look like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {}
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16
    },
    methods: {
        registerAccount(){
            // record user details
            // add registration to localStorage
            // clear the registration fields

        }
    }

});

Let's break this down. First inside the data:{} object, we defined an object to store and retrieve the userData. Then we added the properties name, email, and password to make the two-way data binding work. Finally we added the max_length and max_pass_length propeties.

How to show input character counter

OK, now that we have a binding between the input fields and our properties, we can show a character counter to the user while they're typing.

This is fairly simple – all there is to do is to show the length of each input property and compare it with the max length properties we have set in the Vue instance.

<div class="form_group">
    <label for="name">Name
        <span> {{ name.length + '/' + max_length }}</span>
    </label>
    <input type="text" v-model="name" :maxlength="max_length" required>
</div>

So here we created a string using an in-template expression. We've shown the length of the name property and the value of the max_length so that while the user types we show something like this: 13/25.

We've also used a v-bind directive on the maxlength attribute so that its value is bound to the value of the property we defined in the Vue instance. So in case we want to change it we can do so in one place.

We will do the same for the other fields.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>

</form>

How to add the logic to the registerAccount method

Now it's time to work on the form submission logic. We will simply populate the object stored in the property userData when the user submits the form.

Inside the registerAccount method we will add the details the user passes and build our object.

 registerAccount(){
            // record user details
            this.userData.name = this.name,
            this.userData.email = this.email,
            this.userData.password = this.password

            // add registration to localStorage

            // clear the registration fields
            this.name = "";
            this.email = "";
            this.password = "";
        }

Here we have taken the value of the properties name, email, and password and assigned them to properties we created in the userData object.

This seems fine mostly because we have put on our input fields the required attribute – but if we remove it we will be able to submit an empty form, and we don't want that.

So let's add a very basic form of validation to at least check if the user has typed something inside our form, otherwise we show an error.

To do this, we need to add an if block inside the method and also an error property to the data object. Our file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",

    },  
    methods: {
        registerAccount(){
            if (this.name !== "" && this.email !== "" && this.password !== "" ) 
            {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Here in the registerAccount we've written a conditional that checks if the length of the name property is not empty, if the email property isn't empty, and if the password isn't empty this.name !== "" && this.email !== "" && this.password !== "".

If all these checks evaluate to a true value, then we run the code inside the block. Otherwise we run the code in the else block that updates the value of the error property that we will now use in our template to show the error message.

We also added a new property usersID: 0, that we used inside the if block to assign an id property to the userData object, just to make our application more realistic. But of course it is useless, as we will not have a database where we store all user details. We'll just store a single user inside their browser's local storage.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>
</form>


<div v-if="error.length > 0"> {{error}}</div>

Now our form is complete and we're also displaying an error message to the user if the required attributes are removed from our markup.

But our data do not persist and when the page is refreshed –everything's all gone. Let's tackle that using the localStorage API.

Inside our Vue instance, we need to set an item in the local storage. But we also need to save the entire userData object so that later we can use its data to display a message to the registered user.

/* Add registration data to the local storage */
localStorage.setItem('simple_tweet_registered', true)
/* Add the whole userData object as JSON string */
localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

Here we use the setItem method of the Local Storage API to add an item to the local storage so that later we can use it to check if the user is registered or not.

Then we also need to store the entire userData object as a string. To do that we use the JSON.stringify method that will turn the object into a JSON string that can be saved in the localStorage.

Our JS file is now as follows:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
    },  
    methods: {
        registerAccount(){
            if (this.name !== ""  && this.email !== "" && this.password !== "" ) {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */
        localStorage.setItem('simple_tweet_registered', true)
        /* Add the whole userData object as JSON string */
        localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Now when the user visits our application page, we need to check inside the browser's local storage to see if there is a key called simple_tweet_registered. If there is, we can assume that the user is registered and we can show the next section, the tweet box. Otherwise, we show the registration form.

We will do that by creating a registered: false property in the data object and use it to display or hide the registration form.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    error: "",
    registered: false,      
}

Wrap the form around a div with a directive v-if="!registered" like this:

<div class="register" v-if="!registered">
    // here goes the form
</div>

<div v-else> Tweetbox </div>

Our final HTML file now looks like this:

    <div class="card">
        <i class="fab fa-twitter fa-lg fa-fw"></i>
        <!-- Register an account -->
        <div class="register" v-if="!registered">
            <button form="register" type="submit">Register</button>
            <h2>Create your account</h2>
            <form id="register" v-on:submit.prevent="registerAccount">
                <div class="form_group">
                    <label for="name">Name
                        <span> {{ name.length + '/' + max_length }}</span>
                    </label>
                    <input type="text" v-model="name" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="email">Email
                        <span> {{ email.length + '/' + max_length }}</span>
                    </label>
                    <input type="email" v-model="email" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="password">Password
                        <span> {{ password.length + '/' + max_pass_length }}</span>
                    </label>
                    <input type="password" v-model="password" :maxlength="max_pass_length" required>
                </div>
            </form>


            <div v-if="error.length > 0"> {{error}}</div>
        </div>
        <!-- Add tweet -->
        <div class="tweetBox" v-else>
            <h2>Welcome username_here write your first Tweet</h2>
        </div>

    </div>

Now to make this work, we will use the lifecycle hook we created which lets us inject our code when the Vue instance has been created. This is because we want to check this before mounting our root element.

So let's add a life cycle hook to the Vue instance. We will check if our key is there, and if so we will update the value of the registered property to true.

We have also stored the full userData object in the local Storage so we can use it to repopulate the userData object when the page is refreshed with the details the user submitted.

created(){
    /* Check if the user is registered and set the registered to true */
    if(localStorage.getItem("simple_tweet_registered") === 'true'){
        this.registered = true;
    }
    // repopulate the userData object
     if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

}

To turn a JSON string back into an object, we can use the JSON.parse method.

Now it's all set for the next task – show a tweet form to the user after registration.

Our code so far looks like this:

The main.js file:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        }

    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});

And the HTML inside the app element:

<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>
    <!-- Register an account -->
    <div class="register" v-if="!registered">
        <button form="register" type="submit">Register</button>
        <h2>Create your account</h2>
        <form id="register" v-on:submit.prevent="registerAccount">
            <div class="form_group">
                <label for="name">Name
                    <span> {{ name.length + '/' + max_length }}</span>
                </label>
                <input type="text" v-model="name" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="email">Email
                    <span> {{ email.length + '/' + max_length }}</span>
                </label>
                <input type="email" v-model="email" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="password">Password
                    <span> {{ password.length + '/' + max_pass_length }}</span>
                </label>
                <input type="password" v-model="password" :maxlength="max_pass_length" required>
            </div>
        </form>


        <div v-if="error.length > 0"> {{error}}</div>
    </div>
    <!-- Add tweet -->
    <div class="tweetBox" v-else>
        <h2>Welcome {{ userData.name }} write your first Tweet</h2>

    </div>

</div>

Here in the HTML, since we used the v-else on the add tweet section and used the local storage to retrieve the data submitted by the user, we can use an in-template expression to grab the user name so that we can output a welcome message.

In the next section, we will create a tweet box form so that after the registration the user can write a tweet.

How to create a tweet box form - HTML

Now it's time to build our add tweet form. We did something very similar earlier in this article, but now we will need to store and make the data persistent. This lets us show a list of tweets even when the page refreshes.

<div class="tweetBox" v-else>
    <h2>Welcome {{ userData.name }} write your first Tweet</h2>
    <form v-on:submit.prevent="sendTweet">
        <div class="form_group">
            <label for="tweet">
                Send your tweet
                <span> {{ tweetMsg.length + '/' + max_tweet }}</span>
            </label>
            <textarea name="tweet" id="tweet" cols="30" rows="10" v-model="tweetMsg" maxlength="200"></textarea>
        </div>
        <button type="submit">Tweet</button>
    </form>

</div>

This is nothing new to us now. Inside the tweetBox element we add a form with the usual v-on directive and a method sendTweet that we will need to define inside the methods object. This will take the tweet and save it somewhere, maybe in a property in the data object.

Inside the form, there is a textarea that has a v-model directive that binds it to a tweetMsg property that we need to create.

Finally, a submit button.

We also have a span inside the tweet label that shows a character counter to the user as we did before in the registration form.

Here we have a new property max_tweet that is used to show the limit and the tweetMsg.length is used to show the current number of the characters inserted.

You can watch the video on YouTube here if you want to review what you've learned.

Create a tweets box form - Vue

Let's go to the Vue instance and add the properties and the sendTweet methods.

Our data object now has three more properties, the max_tweet set to 200, the tweetMsg that binds to the textarea, and a tweets array that we will use to store all tweets the user sends.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    max_tweet: 200, // max tweets lenght
    error: "",
    registered: false,
    tweetMsg: "", // current tweet
    tweets: [] // list of tweets
}

Inside the methods, we have a new method that will be invoked by the v-on directive when the form is submitted:

sendTweet(){
    /* Store the tweet in the tweets property */
    this.tweets.unshift(
        {
            text: this.tweetMsg,
            date: new Date().toLocaleTimeString()
        }

    );
    /* Empty the tweetMsg property */
    this.tweetMsg = "";
    //console.log(this.tweets);

    /* Tranform the object into a string  */
    stringTweets = JSON.stringify(this.tweets)
    //console.log(stringTweets);

    /* Add to the local storage the stringified tweet object */
    localStorage.setItem('simple_tweet_tweets', stringTweets)
},

The code above does four things:

• takes the tweets array and adds in it an object to represent a single tweet with text and date properties. To the text property, we assign the value of the tweetMsg that is bound with the textarea. For the date, we create a new date object with the new Date().toLocaleTimeString() method.
• we empty the value of the tweetMsg
• we transform the tweets property into a string using the method JSON.stringify(this.tweets)
• Then we add it to the local storage.

Our final main.js file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        },
        sendTweet(){
            /* Store the tweet in the tweets property */
            this.tweets.unshift(
                {
                    text: this.tweetMsg,
                    date: new Date().toLocaleTimeString()
                }

            );
            /* Empty the tweetMsg property */
            this.tweetMsg = "";
            //console.log(this.tweets);

            /* Tranform the object into a string  */
            stringTweets = JSON.stringify(this.tweets)
            //console.log(stringTweets);

            /* Add to the local storage the stringified tweet object */
            localStorage.setItem('simple_tweet_tweets', stringTweets)
        },


    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});