DEV Community: Anthony Gore

Build an Online Course Site with Vue

Anthony Gore — Tue, 26 Apr 2022 06:09:55 +0000

A great way to share your knowledge is with an online course. Rather than being stuck with the boring and inflexible lesson pages offered by the well-known course platforms, we can build our own so we can make the design and UX exactly how we like.

In this tutorial, I’ll show you how to create a single-page app course site using Vue 3 & Vite. The features will include markdown-based content, embedded Vimeo videos, and lesson navigation.

We’ll make this a static site so you won’t need a backend. Here’s what the home page, course page, and lesson page will look like:

At the end of the tutorial, I’ll also show you how to (optionally) enroll students so you can track student progress and protect lesson content so you can monetize your course. For this part, we’ll integrate CourseKit which is a headless API for hosting online courses.

You can view a demo of the finished product here and get the source code here.

Set up with Vite

Let’s go ahead and set up our single-page app course site using Vite.

$ npm create vite@latest

Follow the prompts and name your project vue-course and select the Vue framework.

Then go ahead and change into the directory and install dependencies.

cd vue-course
npm install

We’ll also need Vue Router for setting up the course pages.

$ npm install --save vue-router

With that done, let’s fire up the dev server and start building!

$ npm run dev

Add router to project

Let's now create a file to configure the router:

$ touch src/router.js

We’ll now need to edit src/main.js and add the router to our app.

src/index.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

Configure router and create pages

Our courses app will have three pages:

A home page that will show the available courses.
A course page that will show the info of a specific course and its lessons. This will have a dynamic route /courses/:courseId.
A lesson page that will show a specific lesson. This will have a dynamic route /courses/:courseId/lessons/:lessonId.

Since we’re using Vue Router, we’ll create a component for each of these pages. Let’s put these in the directory, src/pages.

$ mkdir src/pages
$ touch src/pages/Home.vue
$ touch src/pages/Course.vue
$ touch src/pages/Lesson.vue

Let's now configure the router. We'll import the router APIs and the page components. We'll then setup the routes with the paths mentioned above. Finally, we'll create and export the router from the file.

src/router.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from './pages/Home.vue'
import Course from './pages/Course.vue'
import Lesson from './pages/Lesson.vue'

const routes = [
  { name: 'home', path: '/', component: Home },
  { name: 'course', path: '/courses/:courseId', component: Course },
  { name: 'lesson', path: '/courses/:courseId/lessons/:lessonId', component: Lesson }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

Add pages to App component

We’ll now go to the App component and clear out the contents. We'll then create our own template where we declare the RouterView component that serves as an outlet for our routes.

src/App.vue

<template>
  <div class="App">
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

With that done, we’ve set up the page structure of our course app.

Create course data file

Since we aren’t using a backend API, the data for our courses and lessons will be stored in a nested JavaScript array. This array will be used to populate the content of our app.

The array will consist of course objects with an id, title, description, and a sub-array of lesson objects.

The lesson objects will have an id, title, and description, and will also include a vimeoId which will be the ID for the lesson’s video (this will be explained below).

Tip: ensure your IDs are unique and sequential.

src/courses.js

const courses = [
  {
    id: 1,
    title: "Photography for Beginners",
    description: "Phasellus ac tellus tincidunt...",
    lessons: [
      {
        id: 1,
        title: "Welcome to the course",
        description: "Lorem ipsum dolor sit amet...",
        vimeoId: 76979871
      },
      {
        id: 2,
        title: "How does a camera work?",
        description: "Lorem ipsum dolor sit amet...",
        vimeoId: 76979871
      },
      ...
    ]
  },
  {
    id: 2,
    title: "Advanced Photography",
    description: "Cras ut sem eu ligula luctus ornare quis nec arcu.",
    lessons: [
      ...
    ]
  },
  ...
]

export default courses

Create home page

Let’s now start building our pages, beginning with the home page. We’ll first import the courses array from the module we just created.

In the component template, we’ll map the array and pass the data into a new component CourseSummary.

src/pages/Home.vue

<script setup>
import courses from '../courses'
import CourseSummary from '../components/CourseSummary.vue'
</script>

<template>
  <div class="Home page">
    <header>
      <h1>Vue Online Course Site</h1>
    </header>
    <CourseSummary v-for="course in courses" :key="course.id" :course="course" />
  </div>
</template>

CourseSummary component

This component will display each course's title and description and will provide a link to the course, allowing the user to select the course they want to take. We pass in the course information via props.

src/components/CourseSummary.vue

<script setup>
defineProps({
  course: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <section class="summary">
    <div>
      <div class="title">
        <h2>
          <router-link
            class="no-underline cursor-pointer"
            :to="{ name: 'course', params: { courseId: course.id } }"
          >
            {{ course.title }}
          </router-link>
        </h2>
      </div>
      <p>
        <router-link
          class="no-underline cursor-pointer"
          :to="{ name: 'course', params: { courseId: course.id } }"
        >
          {{ course.description }}
        </router-link>
      </p>
    </div>
  </section>
</template>

With that done, here’s what our home page will look like once a bit of CSS has been added (I won’t show that here for brevity but you can see it in the source code.).

Create course page

The next page we’ll create is the course page. Note that the page path /courses/:courseId has a dynamic segment for the course ID which is how we know which course’s data to show.

Let’s use the useRoute composable from Vue Router to extract the dynamic segment at runtime.

src/pages/Course.vue

import { useRoute } from 'vue-router'
const route = useRoute()
const courseId = route.params.courseId
console.log(courseId) // 1

Now we can use the ID to get the relevant course data from the courses data with an array find.

Tip: if the find returns null you should probably show a 404 page.

src/pages/Course.vue

import courses from '../courses'
import { useRoute } from 'vue-router'
const route = useRoute()
const courseId = route.params.courseId
const course = courses.find(course => course.id === parseInt(courseId))
const { title, lessons } = course

We can now define a template for the course. The header will include a breadcrumb at the top of the page and details of the course including the title and description.

We’ll then have a link to the first lesson with the text “Start course”. We’ll also display summaries of the lessons included in the course which we create by mapping over the lessons sub-property and passing data to another component LessonSummary.

src/pages/Course.vue

<script setup>
import courses from '../courses'
import { useRoute } from 'vue-router'
import LessonSummary from '../components/LessonSummary.vue'
const route = useRoute()
const courseId = route.params.courseId
const course = courses.find(course => course.id === parseInt(courseId))
const { title, lessons } = course
</script>

<template>
  <div class="Course page">
    <header>
      <p>
        <router-link :to="{ name: 'home' }">Back to courses</router-link>
      </p>
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <router-link
        class="button primary icon"
        :to="`/courses/${courseId}/lessons/${course.lessons[0].id}`"
      >
        Start course
      </router-link>
    </header>
    <div>
      <LessonSummary
        v-for="(lesson, index) in lessons"
        :key="index"
        :course-id="courseId"
        :lesson="lesson"
        :num="index + 1"
      />
    </div>
  </div>
</template>

LessonSummary component

Similar to the CourseSummary component, this one will receive props with the lesson’s data which can be used to show a title and description as a clickable link. This will allow users to navigate directly to a lesson.

src/components/LessonSummary.vue

<script setup>
defineProps({
  courseId: {
    type: String,
    required: true
  },
  num: {
    type: Number,
    required: true
  },
  lesson: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <section class="summary">
    <div>
      <div class="title">
        <h2>
          <router-link
            class="no-underline cursor-pointer"
            :to="'/courses/' + courseId + '/lessons/' + lesson.id"
          >
            {{ num }}. {{ lesson.title }}
          </router-link>
        </h2>
      </div>
      <p>
        <router-link
          class="no-underline cursor-pointer"
          :to="'/courses/' + courseId + '/lessons/' + lesson.id"
        >
          {{ lesson.description }}
        </router-link>
      </p>
    </div>
  </section>
</template>

With that done, here’s what the course page will look like:

Create lesson page

Similar to the course page, the lesson page includes dynamic segments in the URL. This time, we have both a courseId and lessonId allowing us to retrieve the correct course and lesson objects using array finds.

src/pages/Lesson.vue

<script setup>
import courses from '../courses'
import { useRoute } from 'vue-router'
const route = useRoute()
const { courseId, lessonId } = route.params
const course = courses.find(course => course.id === parseInt(courseId))
const lesson = course.lessons.find(lesson => lesson.id === parseInt(lessonId))
</script>

Vimeo embed

Each lesson will have an associated video. In this demo, we’ll be using a Vimeo video, though you could use any video service that allows embedding in your own site.

All you need to do is grab the video’s ID after it has been uploaded and add it to the courses data module. The ID is normally a number like 76979871.

At runtime, we’ll embed a Vimeo video player and load the video using its ID. To do this, let’s install the Vue Vimeo Player component.

$ npm install vue-vimeo-player@next --save

Lesson page component

Now let’s create a template for our Lesson page component. Like the course page, we’ll provide a breadcrumb and the lesson title at the top of the template.

We’ll then use the Vimeo component and pass it a prop video with the vimeo ID from our data.

src/pages/Lesson.vue

<script setup>
import courses from '../courses'
import { useRoute } from 'vue-router'
import { vueVimeoPlayer } from 'vue-vimeo-player'
const route = useRoute()
const { courseId, lessonId } = route.params
const course = courses.find(course => course.id === parseInt(courseId))
const lesson = course.lessons.find(lesson => lesson.id === parseInt(lessonId))
</script>

<template>
  <div class="Lesson page">
    <header>
      <p>
        <router-link :to="'/courses/' + course.id">Back to {{ course.title }}</router-link>
      </p>
      <h1>{{ lesson.title }}</h1>
    </header>
    <div class="Content">
      <vue-vimeo-player :video-id="lesson.vimeoId" :options="{ responsive: true }" />
    </div>
  </div>
</template>

Complete and continue button

The last thing we’ll add to the lesson page is a Complete and continue button. This allows the user to navigate to the next lesson once they’ve finished watching the video.

Let’s create a new component called CompleteAndContinueButton. This will use Vue Router’s useRouter composable to navigate to the next lesson (whose ID is passed in as a prop).

src/components/CompleteAndContinueButton.vue

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  lessonId: {
    type: String,
    required: true
  }
})
function completeAndContinue () {
  router.push(`/courses/${course.id}/lessons/${props.lessonId}`)
}
</script>

<template>
  <button class="button primary" @click="completeAndContinue">
    Complete and continue
  </button>
</template>

We’ll add this component directly under the Vimeo component in the lesson page template. Note that we’ll need to get the next lesson ID and pass it as a prop. We’ll create a function nextLessonId() to find this.

src/pages/Lesson.js

<script setup>
import courses from '../courses'
import { useRoute } from 'vue-router'
import { vueVimeoPlayer } from 'vue-vimeo-player'
import CompleteAndContinueButton from '../components/CompleteAndContinueButton.vue'
const route = useRoute()
const { courseId, lessonId } = route.params
const course = courses.find(course => course.id === parseInt(courseId))
const lesson = course.lessons.find(lesson => lesson.id === parseInt(lessonId))
const currentIndex = course.lessons.indexOf(lesson)
const nextIndex = (currentIndex + 1) % course.lessons.length
const nextLessonId = course.lessons[nextIndex].id.toString()
</script>

<template>
  <div class="Lesson page">
    <header>
      <p>
        <router-link :to="'/courses/' + course.id">Back to {{ course.title }}</router-link>
      </p>
      <h1>{{ lesson.title }}</h1>
    </header>
    <div class="Content">
      <vue-vimeo-player :video-id="lesson.vimeoId" :options="{ responsive: true }" />
      <CompleteAndContinueButton
        :courseId="courseId"
        :lessonId="nextLessonId"
      />
    </div>
  </div>
</template>

Reloading page on param change

One of the quirks of Vue Router is that changing route params does not reload the page component. This means the complete and continue button will change the route but the data on the page will stay the same.

In this case, we'd prefer to reload the page component. We can do this by adding a key attribute to the router view and passing to it the full route path. This means it will treat each combination of route params as separate pages.

<template>
  <div class="App">
    <main>
      <router-view :key="$route.fullPath"></router-view>
    </main>
  </div>
</template>

With that done, here’s what our lesson page will look like. The video is, of course, playable, and the student can navigate to the next lesson once they’ve finished watching.

Add student enrollments

Right now, our app has the basic functionality of a course: a student can select a course, select a lesson, and watch the video.

There are other important aspects of online courses that we have not included, though.

Firstly, personalization. Students want to be able to track the lessons they’ve already completed in case they don't finish the course in one go.

Secondly, we may want to protect our content so only paying students can see it. That way we can monetize our course.

Both these features require an auth system allowing students to enroll so we know which courses they’ve purchased and which lessons they’ve completed.

CourseKit

Creating a course backend is an arduous task. An alternative is to use CourseKit, a headless API for online courses which we could easily plug into the app we’ve created.

CourseKit is designed to provide exactly the features we’re missing in our app: student management and role-based access to content.

Adding CourseKit to our project

To add CourseKit to this project we'd create an account and transfer our course data there. We’d then use the CourseKit JavaScript client to call the data through the API.

Here’s what the lesson page would look like if we added CourseKit. Note how the content is hidden until the user authenticates.

Here’s the full demo of this site with CourseKit integrated.

Try CourseKit

CourseKit is currently in public beta, meaning it is launched and it works, but some features (e.g. analytics) are still in progress.

If you’d like to try it out, create a free account here:

Get started with CourseKit

Create an online course for developers: idea to launch

Anthony Gore — Fri, 22 Apr 2022 01:12:18 +0000

Cover image by JESHOOTS.COM on Unsplash

Creating and launching a successful course isn't easy, but it can be very rewarding.

It's a great feeling when other developers tell you they learned a difficult concept thanks to what you taught them.

It can also be financially rewarding. Josh Comeau said he generated over $500K in revenue for his course "CSS for JavaScript Developers".

This is the first post in a series exploring how to successfully create and launch an online course for developers.

About me

I’ve launched my first course on Udemy way back in 2016 ("The Ultimate Vue.js 2 Course"). I launched with a couple of hours of video and then gradually expanded it to around 10 hours.

Since then, I've released a number of other courses with a few successes (and a few flops) and have several thousand people have taken my courses.

In this series, I'll share some of the things I've learned along the way.

About this series

Here are some of the topics I'll be covering in future posts:

Who can create a course? Are you "expert" enough?
How do you choose a good topic?
How do you create the content?
How do you market your course?

Let me know what other questions you have or topics you’d like to learn about.

Build an Online Course with React

Anthony Gore — Fri, 04 Mar 2022 01:32:50 +0000

In this tutorial, I’ll show you how to create a single-page app course site using React. The features will include markdown-based content, embedded Vimeo videos, and lesson navigation.

We’ll make this a static site so you won’t need a backend. Here’s what the home page, course page, and lesson page will look like:

You can view a demo of the finished product here and get the source code here.

Set up with Create React App

Let’s go ahead and set up our single-page app course site using Create React App.

$ npx create-react-app react-course
$ cd react-course

We’ll also need React Router for setting up the course pages.

$ npm install --save react-router-dom

With that done, let’s fire up the dev server and start building!

$ npm start

Configure router and create pages

Our courses app will have three pages:

A home page that will show the available courses.
A course page that will show the info of a specific course and its lessons. This will have a dynamic route /courses/:courseId.
A l*esson page* that will show a specific lesson. This will have a dynamic route /courses/:courseId/lessons/:lessonId.

Since we’re using React Router, we’ll create a component for each of these pages. Let’s put these in the directory, src/pages.

$ mkdir src/pages
$ touch src/pages/Home.js
$ touch src/pages/Course.js
$ touch src/pages/Lesson.js

Add router to project

We’ll now need to edit src/index.js and wrap our main App component with BrowserRouter so the router will function.

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter } from "react-router-dom"
import './index.css'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

Add pages to App component

We’ll now go to the App component and clear out the contents. We'll then create our own template with the three routes and pages we declared above.

src/App.js

import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Course from './pages/Course'
import Lesson from './pages/Lesson'

function App() {
  return (
    <div className="App">
      <main>
        <Routes>
          <Route
            path="/" 
            element={<Home />} 
          />
          <Route
            path="/courses/:courseId" 
            element={<Course />}
          />
          <Route
            path="/courses/:courseId/lessons/:lessonId"
            element={<Lesson />}
          />
        </Routes>
      </main>
    </div>
  )
}

export default App

With that done, we’ve set up the page structure of our course app.

Create course data file

Since we aren’t using a backend API, the data for our courses and lessons will be stored in a nested JavaScript array. This array will be used to populate the content of our app.

The array will consist of course objects with an id, title, description, and a sub-array of lesson objects.

The lesson objects will have an id, title, and description, and will also include a vimeoId which will be the ID for the lesson’s video (this will be explained below).

Tip: ensure your IDs are unique and sequential.

src/courses.js

const courses = [
  {
    id: 1,
    title: "Photography for Beginners",
    description: "Phasellus ac tellus tincidunt...",
    lessons: [
      {
        id: 1,
        title: "Welcome to the course",
        description: "Lorem ipsum dolor sit amet...",
        vimeoId: 76979871
      },
      {
        id: 2,
        title: "How does a camera work?",
        description: "Lorem ipsum dolor sit amet...",
        vimeoId: 76979871
      },
      ...
    ]
  },
  {
    id: 2,
    title: "Advanced Photography",
    description: "Cras ut sem eu ligula luctus ornare quis nec arcu.",
    lessons: [
      ...
    ]
  },
  ...
]

export default courses

Create home page

Let’s now start building our pages, beginning with the home page. We’ll first import the courses array from the module we just created.

In the component template, we’ll map the array and pass the data into a new component CourseSummary.

src/pages/Home.js

import courses from '../courses'
import CourseSummary from '../components/CourseSummary'

function Home() {
  return (
    <div className="Home page">
      <header>
        <h1>React Online Course Site</h1>
      </header>
      {courses.map((course) => (
        <CourseSummary course={course} key={course.id} />
      ))}
    </div>
  )
}

export default Home

CourseSummary component

src/components/CourseSummary.js

import { Link } from 'react-router-dom'

function CourseSummary(props) {
  return (
    <section key={props.course.id} className="summary">
      <div>
        <div className="title">
          <h2>
            <Link
              className="no-underline cursor-pointer"
              to={'/courses/' + props.course.id}
            >
              {props.course.title}
            </Link>
          </h2>
        </div>
        <p>
          <Link
            className="no-underline cursor-pointer"
            to={'/courses/' + props.course.id}
          >
            {props.course.description}
          </Link>
        </p>
      </div>
    </section>
  )
}

export default CourseSummary

With that done, here’s what our home page will look like once a bit of CSS has been added (I won’t show that here for brevity but you can see it in the source code.).

Create course page

The next page we’ll create is the course page. Note that the page path /courses/:courseId has a dynamic segment for the course ID which is how we know which course’s data to show.

Let’s use the useParams hook from React Router to extract the dynamic segment at runtime.

src/pages/Course.js

import { useParams } from 'react-router-dom'

function Course() {
  let { courseId } = useParams()
  console.log(courseId) // 1
}

export default Course

Now we can use the ID to get the relevant course data from the courses data with an array find.

Tip: if the find returns null you should probably show a 404 page.

src/pages/Course.js

import { useParams } from 'react-router-dom'
import courses from '../courses'

function Course() {
  const { courseId } = useParams()
  const course = courses.find(course => course.id === courseId)
}

export default Course

We can now define a template for the course. The header will include a breadcrumb at the top of the page and details of the course including the title and description.

src/pages/Course.js

import { useParams } from 'react-router-dom'
import LessonSummary from '../components/LessonSummary'
import { Link } from 'react-router-dom'
import courses from '../courses'

function Course() {
  const { courseId } = useParams()
  const course = courses.find(course => course.id === parseInt(courseId))
  return (
    <div className="Course page">
      <header>
        <p>
          <Link to={'/'}>Back to courses</Link>
        </p>
        <h1>{course.title}</h1>
        <p>{course.description}</p>
        <Link 
          className="button primary icon" 
          to={`/courses/${courseId}/lessons/${course.lessons[0].id}`}
        >
          Start course
        </Link>
      </header>
      <div>
        {course.lessons.map((lesson, index) => (
          <LessonSummary
            courseId={courseId}
            lesson={lesson}
            num={index + 1}
            key={lesson.id}
          />
        ))}
      </div>
    </div>
  )
}

export default Course

LessonSummary component

src/components/LessonSummary.js

import { Link } from 'react-router-dom'

function LessonSummary(props) {
  return (
    <section key={props.lesson.id} className="summary">
      <div>
        <div className="title">
          <h2>
            <Link
              className="no-underline cursor-pointer"
              to={'/courses/' + props.courseId + '/lessons/' + props.lesson.id}
            >
              {props.num}. {props.lesson.title}
            </Link>
          </h2>
        </div>
        <p>
          <Link
            className="no-underline cursor-pointer"
            to={'/courses/' + props.courseId + '/lessons/' + props.lesson.id}
          >
            {props.lesson.description}
          </Link>
        </p>
      </div>
    </section>
  )
}

export default LessonSummary

With that done, here’s what the course page will look like:

Create lesson page

src/pages/Lesson.js

import { useParams } from 'react-router-dom'
import courses from '../courses'

function Lesson() {
  const { courseId, lessonId } = useParams()
  const course = courses.find(course => course.id === parseInt(courseId))
  const lesson = course.lessons.find(lesson => lesson.id === parseInt(lessonId))
}

export default Lesson

Vimeo embed

Each lesson will have an associated video. In this demo, we’ll be using a Vimeo video, though you could use any video service that allows embedding in your own site.

All you need to do is grab the video’s ID after it has been uploaded and add it to the courses data module. The ID is normally a number like 76979871.

At runtime, we’ll embed a Vimeo video player and load the video using its ID. To do this, let’s install the React Vimeo component.

$ npm i -S @u-wave/react-vimeo

Lesson page component

Now let’s create a template for our Lesson page component. Like the course page, we’ll provide a breadcrumb and the lesson title at the top of the template.

We’ll then use the Vimeo component and pass it a prop video with the vimeo ID from our data.

src/pages/Lesson.js

import { Link, useParams } from 'react-router-dom'
import Vimeo from '@u-wave/react-vimeo'
import courses from '../courses'

function Lesson() {
  const { courseId, lessonId } = useParams()
  const course = courses.find(course => course.id === parseInt(courseId))
  const lesson = course.lessons.find(lesson => lesson.id === parseInt(lessonId))
  return (
    <div className="Lesson page">
      <header>
        <p>
          <Link to={'/courses/' + course.id}>Back to {course.title}</Link>
        </p>
        <h1>{lesson.title}</h1>
      </header>
      <div className="Content">
        <Vimeo video={lesson.vimeoId} responsive />
      </div>
    </div>
  )
}

export default Lesson

Complete and continue button

The last thing we’ll add to the lesson page is a Complete and continue button. This allows the user to navigate to the next lesson once they’ve finished watching the video.

Let’s create a new component called CompleteAndContinueButton. This will use React Router’s useNavigate hook to navigate to the next lesson (whose ID is passed in as a prop).

src/components/CompleteAndContinueButton.js

import { useNavigate } from 'react-router-dom'

function CompleteAndContinueButton(props) {
  const navigate = useNavigate()
  function completeAndContinue () {
    navigate(`/courses/${props.courseId}/lessons/${props.lessonId}`)
  }
  return (
    <button className="button primary" onClick={completeAndContinue}>
      Complete and continue
    </button>
  )
}

export default CompleteAndContinueButton

src/pages/Lesson.js

import { Link, useParams } from 'react-router-dom'
import Vimeo from '@u-wave/react-vimeo'
import courses from '../courses'
import CompleteAndContinueButton from '../components/CompleteAndContinueButtons'

function Lesson() {
  ...
  const nextLessonId = () => {
    const currentIndex = course.lessons.indexOf(lesson)
    const nextIndex = (currentIndex + 1) % course.lessons.length
    return course.lessons[nextIndex].id
  }
  return (
    <div className="Lesson page">
      <header>...</header>
      <div className="Content">
        <Vimeo video={lesson.vimeoId} responsive />
        <CompleteAndContinueButton 
          courseId={courseId}
          lessonId={nextLessonId()}
        />
      </div>
    </div>
  )
}

export default Lesson

With that done, here’s what our lesson page will look like. The video is, of course, playable, and the student can navigate to the next lesson once they’ve finished watching.

Add student enrollments

Right now, our app has the basic functionality of a course: a student can select a course, select a lesson, and watch the video.

There are other important aspects of online courses that we have not included, though.

Firstly, personalization. Students want to be able to track the lessons they’ve already completed in case they don't finish the course in one go.

Secondly, we may want to protect our content so only paying students can see it. That way we can monetize our course.

Both these features require an auth system allowing students to enroll so we know which courses they’ve purchased and which lessons they’ve completed.

CourseKit

Creating a course backend is an arduous task. An alternative is to use CourseKit, a headless API for online courses which we could easily plug into the app we’ve created.

CourseKit is designed to provide exactly the features we’re missing in our app: student management and role-based access to content.

Adding CourseKit to our project

To add CourseKit to this project we'd create an account and transfer our course data there. We’d then use the CourseKit JavaScript client to call the data through the API.

Here’s what the lesson page would look like if we added CourseKit. Note how the content is hidden until the user authenticates.

Here’s the full demo of this site with CourseKit integrated.

Join CourseKit as an early user

CourseKit is currently in public beta, meaning it is launched and it works, but some features (e.g. analytics) are still in progress.

We have limited invitations for early users. If you’d like to request one, or if you’d just like to stay informed about the progress of CourseKit, be sure to leave your details on this page:

Join CourseKit beta list

Introducing CourseKit: headless online course platform

Anthony Gore — Thu, 17 Feb 2022 01:10:14 +0000

When it comes to hosting online courses, developers have had to make a tough choice: either go with an all-in-one solution like Teachable or Thinkific and be stuck with dull design, an unimaginative lesson interface, and severe feature bloat. Or, spend 6 months building a custom platform from scratch.

My new app, CourseKit, offers a better choice. With its headless architecture, CourseKit allows developers to create their own course site with their favorite frontend tools without the headache of coding backend features like user auth and analytics.

In this article, I’ll give you a rundown of how CourseKit works and why you might want to use it for your next online course project.

A little background

First, a bit about me. I’m Anthony Gore and I’ve been a web developer for around 10 years.

I’ve always enjoyed sharing my knowledge with other developers and launched my first video course on Vue.js 2 back in 2016.

Since then I’ve released several other courses and have tried every course hosting option out there including marketplaces like Udemy and all-in-one platforms like Teachable.

No matter where I hosted my courses, there was always something I wanted to do that I couldn’t. So last year I decided to build my own course hosting platform from scratch and migrate all my courses onto it.

While I was able to get the features and design I was looking for, it was a crazy amount of work, most of which was spent on backend stuff that I really didn’t need to customize.

This got me thinking - what if took what I’d made and spun it off into a product to save other developers from having to repeat this same work?

And so CourseKit was conceived.

How CourseKit is different

The main difference between CourseKit and other self-hosted course platforms is that CourseKit is a headless platform.

If you’re unfamiliar with this architecture, it means that the platform has a backend CMS where you can upload and configure your content but there is no frontend website provided.

Instead, your content is available from a secure HTTP service. This architecture allows you to create a custom frontend and so frees you from the prosaic design and UX of other platforms.

I’m not a great designer myself, but here’s a demo course page I built with Nuxt and Tailwind (you can, of course, use whatever frontend tech stack you like).

The other major difference between CourseKit and Teachable, Thinkific, etc, is that it's not a “business in a box” i.e. it is not bloated with features like video hosting, emails, payment gateways, etc.

Like all good developer platforms, CourseKit optimizes for flexibility and creativity, so you instead get to add the features you want with your own code or with third-party providers you already use e.g. Vimeo, ConvertKit, and Stripe for video, email, and payment respectively. These can be connected with easy-to-set-up API integrations.

Want to try CourseKit?

In a moment, I’ll explain the features of CourseKit in more detail. However, if you prefer to jump ahead and try it yourself, you can request an invite for the beta version by leaving your details here:

Join CourseKit beta list

Key features of CourseKit

I’ve explained the headless architecture. Let’s now take a look at some of the other features provided by CourseKit.

Secure, role-based API

As explained, you can create a course by uploading content in the backend CMS. Your course site can then fetch the content via API.

Some of the content you’ll want to make public (e.g. metadata like the course name and lesson titles), but you’ll probably want the meat of your lesson content to be private.

The CourseKit API is protected with OAuth to ensure that only enrolled students can access any private content.

Student management

To provide access to your courses you can either enroll students manually via the dashboard or use the CourseKit API. For example, after a student has paid for your course with Gumroad or Stripe, you can set up a webhook to POST their email to the required endpoint.

Now you just need to pop a “log in” link on your site and, voila, role-based access is handled.

JavaScript client library

To make creating course sites easy, I’ve supplied a JavaScript client library that allows easy connection with the API and other handy features.

Here’s an example snippet showing how you’d create a “complete and continue” button on your lessons that will allow the user to simultaneously mark the current lesson complete and progress to the next one.

Note that user, lesson and course are all objects of the client library.

const button = document.querySelector('#complete-button')
if (user.isAuthenticated()) {
  button.addEventListener('click', async () => {
    const success = await lesson.markComplete()
    if (success) {
      const nextLessonId = course.nextLessonId
      window.location.href = `/courses/${course.id}/lessons/${nextLessonId}`
    }
  })
}

Markdown-based content

To create your lessons you can upload markdown files into the CourseKit dashboard. The markdown can include frontmatter variables so that you can easily include metadata like the lesson title (a public value) or a Vimeo ID (a private value)

Here’s an example of lesson content.

---
vimeoId: 4893274923
public:
    title: 'Introduction to pin collecting'
---

Hey pinheads, welcome to the course.

Your course site will fetch from the API at runtime and render content dynamically. Here’s what the above lesson content will look like in your app for an authenticated user:

console.log(lesson)

/*
{
    meta: {
        title: 'Introduction to pin collecting',
        vimeoId: 4893274923
    } 
    content: '<p>Hey pinheads, welcome to the course.</p>'
}
*/

Setting up a course with CourseKit

Unlike bloated business-in-a-box course platforms, CourseKit has a modular architecture. This means you can add the features you need either with your own code or with third-party providers.

While this may be more work to set up initially, you end up with a course site that is lean and flexible.

This diagram represents a typical video-based course setup where students are enrolled after purchasing through Stripe.

Let’s now look at each part in detail.

CourseKit dashboard

This is the cloud-based CMS you get access to when you create an account. Here are some of the things you can do in the dashboard:

Create courses
Add your lesson content
Manage students
Check analytics

CourseKit API

This is the OAuth-secured HTTP service that your course site will interface with. Here are some of the things you’ll use it for:

Fetch course and lesson content
Authenticate students
Manage students (e.g. update lesson progress)
Enroll students

Your course site

Your frontend course site can be created with whatever tech stack you like, e.g. React and Bootstrap, to achieve the design and UX you desire.

CourseKit is Jamstack-friendly, so I recommend you make this a static site and use the CourseKit JavaScript client to connect with the API and create your UI widgets.

Note: you can clone a course site template to get up and running quickly.

Stripe

One way to add students to your course is to provide a link to Stripe checkout on your course pages.

With a simple webhook, you can then enroll the student in the course through the CourseKit API.

Vimeo

Vimeo is a cheap and effective way to create video content. Vimeo videos can easily be embedded in your site. Just drop the video ID into your course content as a frontmatter variable and render the embed at runtime.

Join as an early user

CourseKit is currently in public beta, meaning it is launched and it works, but some features (e.g. analytics) are still in progress.

We have limited invitations for early users. If you’d like to request one, or if you’d just like to stay informed about the progress of CourseKit, be sure to leave your details on this page:

Join CourseKit beta list

Should You Use Composition API as a Replacement for Vuex?

Anthony Gore — Mon, 05 Oct 2020 00:00:00 +0000

The Composition API has freed reactive data from Vue components and instances, allowing it to be passed around like any JavaScript object. This has an obvious application - global reactive state. If this can be achieved, what do you need Vuex for?

In this article, I'll show you how you can replace Vuex with features of the Composition API, and also make the case for whether this is a wise idea or not.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/10/04.

If you want to brush up on the concepts of Vuex, first read WTF is Vuex? A Beginner's Guide To Vue's Application Data Store. And if you aren't familiar with the Vue Composition API, you can learn about that here.

Global reactive state with Composition API

The main reason Vuex exists is to allow global reactive state in a Vue app. Without it, you could only share local component state via the component interface i.e. props/events. Passing props and events from a component four of five layers deep is a type of drudgery all too familiar to Vue users.

However, the Composition API (packaged with Vue 3) allows you to create independent reactive variables outside of a component (and, in fact, outside of a Vue app). You can, for example, create a module file exporting reactive variables and import this into any component where you want to use it.

DIY Vuex with Composition API

Let's see how we can roll our own Vuex using the Composition API. Firstly, we'll create a file to declare and export global state variables.

Let's use the reactive method to create a state object with a value count, assuming we want to use this count value throughout the app.

src/global.js

import { reactive } from "vue";

const state = reactive({
  count: 0
});

export default { state };

Vuex pattern

As the Vuex documentation says - Vuex is both a pattern and a library. To make state predictable, it's important that variables aren't directly mutated.

We can implement that easily enough in our DIY Vuex. We'll use the readonly method which creates a read-only copy of our state. We'll also provide a method increment which is what users will use to change the value of count (this is akin to a Vuex mutation).

src/global.js

import { reactive, readonly } from "vue";

const state = reactive({
  count: 0
});

const increment = function () {
  state.count++;
}

export default { state: readonly(state), increment };

Installing the store with provide/inject

The easiest way to use our DIY Vuex store is with the provide/inject feature. So we'll import this module in the app's root instance, then provide it so it's available to all child components.

src/main.js

import { createApp } from "vue";
import global from "@/global";

const app = createApp({
  provide: {
    global
  },
  ...
}

Now, we can access it by using inject:

src/components/MyComponent.vue

<template></template>
<script>
export default {
  inject: ["global"]
}
</script>

The states values and methods can be used now:

src/components/MyComponent.vue

<template>
  <div>{{ global.state.count }}
  <button @click="global.increment">Increment</button>
</template>
<script>
export default {
  inject: ["global"]
}
</script>

So should you ditch Vuex?

We've seen how we can roll our own Vuex using Composition API. In doing so, we've overcome a lot of the complaints about Vuex because we have:

Minimal boilerplate
No esoteric naming like "mutations", "commits", etc
No additional dependencies.

So why not ditch Vuex altogether?

Advantage of Vuex 1: debugging

Even though we've copied the global reactive state mechanism, one huge advantage of Vuex that we have not copied is it's debugging capabilities.

Firstly, all mutations are tracked with Vuex, allowing you to see in Vue Devtools what component changed the state and how.

Secondly, there's time-travel debugging. This is a feature of Vuex where you can select any previous state of the app.

Advantage of Vuex 2: plugins

Another advantage of Vuex is the plugin ecosystem. For example, the vuex-persisted state plugin allows you to persist app state in local storage, and the Vue Router plugin which syncs the current route data in store state.

All the existing plugins could indeed be replicated as Composition API utilities, but without the standardized structure of Vuex, they wouldn't be plug and play.

Conclusion

There's no harm in creating a simple module for global reactive state using Composition API in a small project, or if it's really important to avoid any overhead.

But the debugging capabilities of Vuex still make it an essential tool for large-scale Vue app development and I can't imagine I'd stop using it in this case.

Looking forward to what's next for Vuex in version 5.

Vue 3 UX Wins with Async Components & Suspense

Anthony Gore — Wed, 19 Aug 2020 02:12:10 +0000

Lazy loading components is a easy way to improve the user experience of your app especially if your code bundle is big or if users are on slow connections.

Vue 3 has introduced several new features to help you achieve this easily and with great UX through the improvements to the async component API and the new Suspense component.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/07/12.

Why lazy load components?

Some parts of your UI don't need to be loaded the instant a user visits your app, for example, dynamic UI features like modals and tooltips, etc. And, if you're using the single-page app architecture, page content on unseen pages shouldn't be loaded until needed either.

You can get an easy performance win by "lazy loading" the components that contain such features and content. This means the code for these components is not included in the initial code bundle sent to a user and is instead loaded on demand.

Example scenario

In this example app, our app displays a component ChatWindow which loads if the user is authenticated.

The details aren't important, but let's assume authentication can only be determined at runtime, and that this component is big and bulky. For these reasons, we may want to lazy load it.

App.vue

<template>
  <h3>Chat with friends here</h3>
  <chat-window v-if="auth" />
</template>
<script>
import ChatWindow from "@/components/ChatWindow";

export default {
  components: {
    ChatWindow
  },
  ...
}
</script>

Lazy loading with Vue 3 async component API

Vue 3 has introduced the defineAsyncComponent API which makes it very simple to lazy load a component.

All you need to do is pass a function to the constructor that loads your component. Assuming you're bundling your code with Webpack or something similar, the easiest way to do this is to use the dynamic import feature (import) which will ensure your component is built into a separate file and loaded only when called upon.

App.vue

<script>
import { defineAsyncComponent } from "vue";

const ChatWindow = defineAsyncComponent(
  () => import("@/components/ChatWindow")
);

export default {
  components: {
    ChatWindow
  },
  ...
}
</script>

When this app is built, you'll see any dynamically imported component as a separate file in your build.

File                                 Size

dist/js/chunk-vendors.f11402df.js    82.39 KiB
dist/js/app.ada103fb.js              20.59 KiB
dist/js/ChatWindow.3c1708e4.js       5.47 KiB
dist/css/app.8221c481.css            1.76 KiB
dist/css/ChatWindow.f16731cd.css     2.75 KiB

For more info on how this works, see my previous article Code Splitting With Vue.js And Webpack.

Loading-state content

The downside of the lazy-loading approach is that the load time you saved by removing it from the initial bundle will need to be incurred when the component is used. This means, for a short period while the rest of the app is loaded, the lazy-loaded part of your UI may be missing.

One pattern to deal with this is to show a "loading-state" component while the requested component is being retrieved.

Here you can see what the app might look like in the first few moments when it loads if we used a spinner for loading state (on the left) and it's fully-loaded state (on the right).

The async component API allows you to include a loading component by passing an options object to the defineAsyncComponent constructor and specifying it there.

App.vue

<script>
import { defineAsyncComponent } from "vue";
import Spinner from "@/components/Spinner.vue";

const ChatWindow = defineAsyncComponent({
  loader: () => import("@/components/ChatWindow"),
  loadingComponent: Spinner
});

export default {
  components: {
    ChatWindow
  },
  ...
}
</script>

Flexible loading state with Suspense

This approach to loading state works just fine but is a little restrictive. For example, you might like to pass props to the loading-state component, pass content to its slot, etc, which is not easily achievable using the async component API.

To add more flexibility, we can use the new Suspense component, also added in Vue 3. This allows us to determine async loading content at a template level.

Suspense is a global component (like transition) and can be used anywhere in your Vue 3 app. To use it, declare it in your template, and put two template tags in the slot: one with the parameter #default, and one with #fallback.

Suspense will ensure the #default template is displayed when the async content loads, and the #fallback template is used as the loading state.

<template>
  <Suspense>
    <template #default>
      <h3>Chat with friends here</h3>
      <chat-window />
    </template>
    <template #fallback>
      <spinner color="blue" />
    </template>
  </Suspense>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Spinner from "@/components/Spinner.vue";

const ChatWindow = defineAsyncComponent(
  () => import("@/components/ChatWindow")
);

export default {
  components: {
    ChatWindow,
    Spinner
  },
  ...
}
</script>

If you want to learn more about lazy loading in Vue, check out this article by Filip Rakowski.

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

Build a Bootstrap 4 & Vue App

Anthony Gore — Wed, 29 Jul 2020 00:00:00 +0000

Bootstrap 4 continues to be the most popular framework for creating web apps. It's a shame that the jQuery dependency makes it less powerful than it could be!

Fortunately, it's fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.

In this tutorial, I'll show you how easy it is to set up a Bootstrap 4 project with Vue. To do this, we'll be using Bootstrap-Vue, Vue CLI, and Vue 2.6. I'll assume you already know the basics of both Bootstrap and Vue.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/07/24.

Setting up a Bootstrap and Vue project

The Bootstrap-Vue project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.

Rather than installing it directly, we can use Bootstrap-Vue as a Vue CLI plugin. This takes care of any configuration boilerplate and will automatically add any dependencies so I highly recommend this approach.

Let's create a new Vue CLI project:

$ vue create bootstrap-vue-app

Note that you will need to have Vue CLI installed in your dev environment already (instructions here).

Vue CLI will now take you through the Vue app setup. If you aren't sure what options to choose, just select "default".

Now, change into your new project directory:

$ cd bootstrap-vue-app

You can now add the Bootstrap-Vue plugin to your project. Unless you have reasons otherwise, I suggest you select "Y" for any prompts.

$ vue add bootstrap-vue

Thanks to the magic of Vue CLI, you have now set up a best-practice Vue & Bootstrap project with no configuration required!

Clearing out boilerplate

By default, Vue CLI provides a boilerplate app for you to begin with. Let's clear the content of App.vue as we'll still need that file, but we can delete HelloWorld.vue all together.

$ > src/components/App.vue
$ rm src/components/HelloWorld.vue

Bootstrap-Vue components

Almost all of the features of Bootstrap are available as globally registered components in Bootstrap-Vue.

These generally have the same names as the Bootstrap components, but to distinguish them from other components, they're prefixed with b-.

For example, let's create a new template in App.vue and add a Bootstrap container. This is packaged in the component b-container.

src/App.vue

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
  </b-container>
</template>

Let's now serve the app we've created

$ npm run serve

Once the code has built, you should see the following:

Also, if you check the page content, you'll see this b-container component has rendered with conventional Bootstrap elements and classes:

<div class="container">
  <p>Hello, Bootstrap-Vue</p>
</div>

Configuration with props

Many of the available components can be configured with Vue props.

For example, let's add a button to our app using the b-btn component. This component has a prop variant which controls the theme. Let's set it to primary.

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn variant="primary">Click</b-btn>
  </b-container>
</template>

We can also bind dynamic values to our Bootstrap components. For example, let's add an alert using the b-alert component. We'll make it a made the alert success and give it some content.

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn variant="primary">Click</b-btn>
    <b-alert variant="success">
      You clicked the button!
    </b-alert>
  </b-container>
</template>

Now, we'll conditionally show the alert by binding the show prop to a local data property showAlert. We'll now toggle the value of showAlert in response to the click event of the b-btn component.

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn 
      variant="primary"
      @click="showAlert = true"
    >
      Click
    </b-btn>
    <b-alert 
      v-bind:show="showAlert"
      variant="success"
    >
      You clicked the button!
    </b-alert>
  </b-container>
</template>
<script>
export default {
  data: () => ({
    showAlert: false
  })
};
</script>

So much easier than jQuery, right?

Bootstrap-Vue directives

Some Bootstrap features are provided as directives rather than components so that they can be easily added to existing elements.

For example, to add a tooltip feature, we can use the v-b-tooltip directive. Let's add one to the button using the directive argument hover so it's triggered by the button hover event.

<b-btn
  variant="primary"
  @click="showAlert = true"
  v-b-tooltip.hover 
  title="This button triggers the alert"
>
  Click
</b-btn>

Note: the tooltip plugin requires a dependency of popper.js but this will be automatically included if you install Bootstrap-Vue with Vue CLI.

Wrap up

Now you can see how easy it is to replace jQuery in Bootstrap 4 with Vue. Let me know if you have any additional questions in the comments below.

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

Vue.js Enterprise Crash Course

Anthony Gore — Thu, 16 Apr 2020 00:59:41 +0000

I’ve just released the first lesson of my new Vue.js Enterprise Crash Course 🥳

This is a short course I made for professional Vue developers looking to take their career and craft to the next level this year.

Check it out, it’s free to join: Vue.js Enterprise Crash Course

Why I made this course

Are you hoping to step up as a developer this year? Maybe there’s a senior role at your company that you've been eyeing, or perhaps you want to find a new company that's working on projects that really excite you.

If you're perfectly happy with your job, perhaps this year you just want to find new and challenging ways to level-up your mastery of the craft.

I made this course to introduce some of the knowledge that expert Vue developers have and that you’ll need if you’re considering building large apps with Vue.

What you will learn

While there are plenty of different skills you need for enterprise development, some of the most crucial are - testing, deployment, and full-stack architecture.

As it’s a short course, you shouldn’t expect to master these topics, but you will get a basic knowledge and a good starting point for further study.

I’ll also give you an enterprise app blueprint that you can mess around with and use as the basis of your own Vue + Node apps.

The first lesson is out today, and in this one, I talk about what enterprise web development skills are and why they’re crucial for building commercial-grade Vue apps.

I hope to see you in the course!

https://crash-course.enterprisevue.com/

Clean, Scalable Forms with Vue Composition API

Anthony Gore — Tue, 31 Mar 2020 00:00:00 +0000

Forms are one of the trickiest parts of frontend development and where you'll likely find a lot of messy code.

Component-based frameworks like Vue.js 2 have done a lot to improve the scalability of frontend code, but the problem of forms has persisted.

In this tutorial, I'll show you how the new Vue Composition API (coming to Vue 3) will make your form code much cleaner and more scalable.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/03/30.

Why form code often sucks

The key design pattern of component-based frameworks like Vue is component composition. This pattern tells us to abstract the features of our app into isolated, single-purpose components that communicate state with props and events.

However, forms can't be abstracted very neatly under this pattern because the functionality and state of a form doesn't clearly belong to any one component and so separating it often causes as many problems as it solves.

Another important reason form code often sucks in Vue apps is that, up until Vue 2, Vue has not had a strong means of reusing code between components. This is important in forms as form inputs are often distinctly different but share many similarities in functionality.

The main method of code reuse offered by Vue 2 is mixins which many would argue are a blatant anti-pattern.

The Vue Composition API

The Composition API is a new way of defining components with Vue.js and will be a core feature of Vue 3. It's also available to use today in Vue 2 as a plugin.

This new API is designed to combat some of the issues I've mentioned (not just in forms but in any aspect of frontend app architecture).

If you're still new to the Composition API or aren't clear what it's for, I recommend you first read the docs and also another article I wrote, When To Use The New Vue Composition API (And When Not To).

The Composition API is not a replacement for the classic Vue API, but something you can use when it's called for. As you'll see in this article, creating clean and scalable form code is a perfect use case.

Adding the Composition API to a Vue 2 project

Since I'm writing this tutorial before Vue 3 has been released, let's add the Composition API to a Vue 2 project as a plugin.

We'll begin by creating a new Vue CLI project (just the bare features is all we need - no router, Vuex, etc) and install the Composition API plugin with NPM.

$ vue create composition-api-form
$ cd composition-api-form
$ npm i -S @vue/composition-api

Next, let's add the plugin to our Vue instance in main.js.

src/main.js

import Vue from "vue";
import App from "./App.vue";

import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

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

Creating form input components

To make this a simple example, we're going to create a form with just two inputs - a name, and and email. Let's create these as their own separate components.

$ touch src/components/InputName.vue
$ touch src/components/InputEmail.vue

Let's now set up the InputName component template in the typical way including an HTML input element with the v-model directive creating a two-way binding with the component.

src/components/InputName.vue

<template>
  <div>
    <label>
      Name
      <input type="text" v-model="input" name="name" />
    </label>
  </div>
</template>
<script>
export default {
  name: 'InputName'
}
</script>

Setting up the form

Let's leave the input for now and set up the form. You could create this as a separate component to make it reusable, but for simplicity of the tutorial, I'll just declare it in the App component template.

We'll add the novalidate attribute to let the browser know we'll be supplying custom validation. We'll also listen to the submit event of the form, prevent it from auto-submitting, and handle the event with an onSubmit method which we'll declare shortly.

We'll then add the InputName and InputEmail components and bind local state values name and email to them respectively.

src/App.vue

<template>
  <div id="app">
    <form novalidate @submit.prevent="onSubmit">
      <InputName v-model="name" />
      <InputEmail v-model="email" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
import InputName from "@/components/InputName";
import InputEmail from "@/components/InputEmail";
export default {
  name: 'App',
  components: {
    InputName,
    InputEmail
  }
}
</script>

Let's now define the form functionality using the Composition API. We'll add a setup method to the component definition where we'll declare two state variables name and email using the ref method of the Composition API. This method will need to be imported from the Composition API package.

We'll then declare an onSubmit function to handle the form submission. I won't specify any functionality since it's irrelevant to this tutorial.

Finally, we need to return the two state variables and the method we've created from the setup function so that they're accessible to the component's template.

src/App.vue

...
import { ref } from "@vue/composition-api";

export default {
  name: "App",
  setup () {
    const name = ref("");
    const email = ref("");
    function onSubmit() {
      // submit to backend or whatever you like
      console.log(name.value, email.value);
    }
    return {
      name,
      email,
      onSubmit
    }
  },
  ...
}

Setting up the inputs

Next, we're going to define the functionality of the InputName component.

Since the parent form is using v-model with this component, it's important to declare a prop value which will be one half of the two-way binding.

Let's create a setup function. Props get passed into this method, as does a context object, giving us access to component instance methods. We can destructure this second argument and get the emit method. We'll need this to fulfill the other half of the v-model two-way binding i.e. to reactively emit new values of the input.

Before we get to that, let's declare a state variable input that will be bound to the input HTML element we declared in the template.

The value of this variable will be something we'll return from a to-be-defined composition function useInputValidator. This function will handle all the common validation logic.

We'll pass in the value prop to this method, and the second argument will be a callback function that returns the validated input value. Let's use this callback to emit this input as an event and fulfill the v-model contract.

src/components/InputName.vue

import useInputValidator from "@/features/useInputValidator";

export default {
  name: "InputName",
  props: {
    value: String
  },
  setup (props, { emit }) {
    const { input } = useInputValidator(
      props.value, 
      value => emit("input", value)
    );
    return {
      input
    }
  }
}

Input validator feature

Let's now create the useInputValidator composition function. To do so, we'll first create a features folder, and then create a module file for it.

$ mkdir src/features
$ touch src/features/useInputValidator.js

In the module file, we're going to export a function. We just saw it will need two arguments - the value prop received from the parent form, which we'll call startVal, and a callback method we'll call onValidate.

Remember that this function needs to return an input state variable, so let's go ahead and declare that, assigning a ref which is initialized with the value provided by the prop.

Before we return the input value from the function, let's watch its value and call the onValidate callback using the input as an argument.

src/features/useInputValidator.js

import { ref, watch } from "@vue/composition-api";

export default function (startVal, onValidate) {
  let input = ref(startVal);
  watch(input, value => { 
    onValidate(value);
  });
  return {
    input
  }
}

Adding validators

The next step is to add validator functions. For the InputName component, we just have one validation rule - a minLength ensuring the input is three characters or more. The yet-to-be-created InputEmail component will need an email validation.

We'll now create these validators in a JavaScript utility module validators.js in the src folder. In a real project, you'd probably use a third-party library instead.

I won't go through the validator functions in any great detail, but here are two important things to note:

These are functions that return functions. This architecture allows us to customize the validation by passing arguments that become part of the closure.
The returned function from each validator always returns either a string (the error message) or null in the case that there is no error.

src/validators.js

const minLength = min => {
  return input => input.length < min 
  ? `Value must be at least ${min} characters` 
  : null;
};

const isEmail = () => {
  const re = /\S+@\S+\.\S+/;
  return input => re.test(input)
  ? null
  : "Must be a valid email address";
}

export { minLength, isEmail };

Back in the composition function, we want the consuming component to define the validations it needs, so let's begin by adding another argument to the function profile validators which should be an array of validation functions.

Inside the input watcher, we'll now process the validation functions. Let's use the map method of the validators array, passing in the current value of the input to each validator method.

The return will be captured in a new state variable, errors, which we'll also return to the consuming component.

src/features/useInputValidator.js

export default function (startVal, validators, onValidate) {
  const input = ref(startVal);
  const errors = ref([]);
  watch(input, value => {
    errors.value = validators.map(validator => validator(value));
    onValidate(value);
  });
  return {
    input,
    errors
  }
}

Returning finally to the InputName component, we're now going to provide the required three arguments to the useInputValidator method. Remember, the second argument is now an array of validators, so let's declare an array in-place and pass in minLength which we'll get by importation from the validators file.

minLength is a factory function, so we call the function passing in the minimum length we want to specify.

We also get two objects returned from our composition function now - input and errors. Both of these will be returned from the setup method for availability in the component's render context.

src/components/InputName.vue

...
import { minLength } from "@/validators";

export default {
  ...
  setup (props, { emit }) {
    const { input, errors } = useInputValidator(
      props.value, 
      [ minLength(3) ],
      value => emit("input", value)
    );
    return {
      input,
      errors
    }
  }
}

That's the last of the functionality that we'll add to this component. Before we move on though, it's important to take a moment and appreciate how much more readable this code is than what you'd see if we were using mixins.

For one thing, we clearly see where our state variables are declared and modified without having to flick over to a separate mixin module file. For another thing, we don't need to be concerned about name clashes between our local variables and the composition function.

Displaying errors

Going to the template of our InputName component, we now have an array of potential errors to display. Let's delegate this to a presentation component called ErrorDisplay.

src/components/InputName.vue

<template>
  <div>
    <label>
      Name
      <input type="text" v-model="input" name="name" />
    </label>
    <ErrorDisplay :errors="errors" />
  </div>
</template>
<script>
...
import ErrorDisplay from "@/components/ErrorDisplay";

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

The functionality of ErrorDisplay is too trivial to show here.

Reusing code

So that's the basic functionality of our Composition API-based form. The objective of this tutorial was to create clean and scalable form code and I want to prove to you that we've done this by finishing off with the definition of our second custom input, InputEmail.

If the objective of this tutorial has been met you should have no trouble understanding it without my commentary!

src/components/InputEmail

<template>
  <div>
    <label>
      Email
      <input type="email" v-model="input" name="email" />
    </label>
    <ErrorDisplay v-if="input" :errors="errors" />
  </div>
</template>
<script>
import useInputValidator from "@/features/useInputValidator";
import { isEmail } from "@/validators";
import ErrorDisplay from "./ErrorDisplay";

export default {
  name: "InputEmail",
  props: {
    value: String
  },
  setup (props, { emit }) {
    const { input, errors } = useInputValidator(
      props.value, 
      [ isEmail() ], 
      value => emit("input", value)
    );
    return {
      input,
      errors
    }
  },
  components: {
    ErrorDisplay
  }
}
</script>

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

Extending Vue Component Templates

Anthony Gore — Mon, 24 Feb 2020 00:00:00 +0000

Do you find yourself wanting to extend a component's template? Vue provides several means of extracting and reusing the component logic and state, but templates are deemed single-use only.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/03/02.

Case study: a survey app

In this article, I'll present a solution using the HTML template pre-processor Pug. It's a bit of a hack, but it does work!

If you're looking to extend a component's logic and state, you probably want to read my other article Extending Vue.js Components which covers composition functions, mixins, higher-order components, etc. Here we're talking about the template.

Let's say you're trying to make a component-based survey app with Vue which looks like this:

Notice that each survey question has a different input type:

Text input
Select input
Radio input

An obvious architecture would be to make each question into a separate component, which is what we're going to do. Well name these components:

SurveyInputText
SurveyInputSelect
SurveyInputRadio

Base component

Let's first create a "base" component called SurveyInput.vue. Notice the following about it:

The question prop is going to be common across each component. This captures the question text e.g. "What is your name".
We don't have any shared logic, but you could add it e.g. validation and error logic
I'm leaving a gap where the input element will need to go. This is where we'll extend the template as you'll shortly see.

SurveyInput.vue

<template>
  <div class="wrapper">
    <h4>{{ question }}</h4>
    <!--the appropriate input element should go here-->
  </div>
</template>
<script>
export default {
  props: {
    question: String  
  }
}
</script>

State and logic reuse

Ignoring the template for a moment, what will be our strategy for extraction and reuse of the state/logic? What we choose here will not affect our ability to extend the component template, so feel free to use mixins, higher-order components, or even the new composition API. I'm going to keep it simple and use the extends component option.

Again, there's still a hanging question about how we get the base template into this subcomponent, as the Vue.extends API doesn't apply to templates!

SurveyInputText.vue

<template>
  <!--The base template needs to be here-->
  <input :placeholder="placeholder">
</template>
<script>
import SurveyInput from './SurveyInput.vue';
export default {
  extends: SurveyInput,
  props: {
    placeholder: String
  }
}
</script>

Conventional options for extending the template (and why they aren't ideal)

A reasonable Vue user would first consider the following design patterns for the template:

Props-driven template logic
Slots

But as I'll show, both have downsides for the use case we're considering, so there is a legitimate case for wanting to use the template-extension hack I'm going present.

Props-driven template logic

Rather than making separate components for each input type, you could create a single mega-component and then specify the template using conditional logic fed by a prop called question-type i.e.

SurveyInput.vue

<template>
  <div class="wrapper">
    <h4>{{ question }}</h4>
    <div v-if="questionType === 'text'">
      <input type="text" v-model="input" />
    </div>
    <div v-else-if="questionType === 'select'">
      <select v-model="input">
        <!--etc etc-->
      </select>
    </div>
    <!--etc etc-->
  </div>
</div>

Now you can declare your questions in the parent, Survey.vue, like this:

Survey.vue

<template>
  <SurveyInput question-type="text" />
  <SurveyInput question-type="select" />
  <!--etc etc-->
</template>

The downside of this approach is that it doesn't scale well. Once you get, say, 3-4 different question types the template will become big and messy.

Slots

Another conventional approach that could work is to put a slot where the input belongs.

SurveyInput.vue

<template>
  <div class="wrapper">
    <h4>{{ question }}</h4>
    <slot />
  </div>
</div>

Using this approach the parent can provide the correct markup for each input like this:

Survey.vue

<template>
  <SurveyInput>
    <input type="text" v-model="q1" />
  </SurveyInput>
  <SurveyInput>
    <select v-model="q2">
      <!--etc etc-->
    </select>
  </SurveyInput>
  <!--etc etc-->
</template>

The downside to slots, though, is that you now have to organize the data model differently. Now, the parent owns the state of each input and would have to communicate it with each child component using props/events, adding complex logic and verbosity.

Survey.vue

<template>
  <SurveyInput :input="q1" @input-validated="updateInput">
    <input type="text" v-model="q1" />
  </SurveyInput>
  <!--etc etc-->
</template>

Hopefully, I've convinced you that template logic and slots aren't ideal, so now let's look at how we can extend a component's template like we can with its state/logic.

To do this, we're going to need an HTML template pre-processor.

Pug HTML pre-processor

By using vue-loader and the lang property of the template in a single-file component, we can use HTML template pre-processing tools like Slim, Handlebars, etc.

My hack for extending Vue templates is to use the include and extends options provided by Pug (previously Jade).

<template lang="pug">
  ...
</template>

First, add Pug to your project. Vue Loader should pick this up without any further config needed.

$ npm i -S pug

Now, let's convert our base component's template to Pug syntax:

<template lang="pug">
  div.wrapper
    h4 {{ question }}
    block input
</template>

Notice that we use block input to declare an "outlet" where the subcomponent content will be distributed.

Important: the outlet is kind of like a slot but the important difference is that template processing occurs at compile-time, not at run-time as it would with slots.

Creating a base template

So here's where it gets slightly messy. If we want our child components to extend the template we first need to put it into its own file SurveyInput.pug:

SurveyInput.pug

div.wrapper
  h4 {{ question }}
  block input

Now we can include this file in our base component so it can still be used as a normal single-file component:

SurveyInput.vue

<template lang="pug">
  include SurveyInput.pug
</template>
<script>
export default {
  props: {
    question: String
  }
}
</script>

It's a shame to have to do that since it kind of defeats the purpose of "single file" components. Probably someone could make a custom webpack loader to avoid having to do this.

Extending to a subcomponent

To extend the subcomponent's template from the base, you'll need to covert its template to Pug as well.

The subcomponents use the extends feature of Pug which includes the base component and outputs any custom content in the input block (again, similar to slots, but it happens at compile-time).

SurveyInputText.vue

<template lang="pug">
  extends SurveyInput.pug
  block input
    input(type="text" :placeholder="placeholder")
</template>
<script>
import SurveyInput from './SurveyInput.vue';
export default {
  extends: SurveyInput,
  props: {
    placeholder: String  
  }
}
</script>

Here's what the subcomponent's template would effectively look like after extending the base and being translated to a regular HTML Vue template:

<div class="wrapper">
  <h4>{{ question }}</h4>
  <input type="text" :placeholder="placeholder">
</div>

Bring it all together

Using this strategy we can go ahead and create the other two subcomponents SurveyInputSelect and SurveyInputRadio. If we then use them in a project our main template might look like this:

Survey.vue

<survey-input-text
  question="1. What is your name?"
  placeholder="e.g. John Smith"
></survey-input-text>

<survey-input-select
  question="2. What is your favorite UI framework?"
  :options="['React', 'Vue.js', 'Angular']"
></survey-input-select>

<survey-input-radio
  question="3. What backend do you use?"
  :options="['Node.js', 'Laravel', 'Ruby']"
  name="backend"
>
</survey-input-radio>

And here's how the rendered markup would look:

<div class="wrapper">
  <h4>1. What is your name?</h4>
  <input type="text" placeholder="e.g. John Smith">
</div>
<div class="wrapper">
  <h4>2. What is your favorite UI framework?</h4>
  <select>
    <option>React</option>
    <option>Vue.js</option>
    <option>Angular</option>
  </select>
</div>
<div class="wrapper">
  <h4>3. What backend do you use?</h4>
  <div><input type="radio" name="backend" value="Node.js">Node.js</div>
  <div><input type="radio" name="backend" value="Laravel">Laravel</div>
  <div><input type="radio" name="backend" value="Ruby">Ruby</div>
</div>

Happy hacking!

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

When To Use The New Vue Composition API (And When Not To)

Anthony Gore — Mon, 17 Feb 2020 00:00:00 +0000

The new Composition API caused a fair amount of controversy when it was first announced by the Vue team. But now that the dust has settled and we've had a chance to try the demo, most of us can see it has great potential.

But like every programming tool, we can expect it to have both benefits and drawbacks. So what I'm thinking about most now is not if to use it, but when to use it.

The RFC says that:

"the problems [the composition API] aims to address appear primarily in large scale applications".

But is it of any use in smaller applications? Or should it perhaps be avoided there?

In this article, I'll give you my thoughts and share a guiding principle that you may find useful.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/02/16.

Motivating example

In the RFC, a motivating example is given of a large component with many features that became unwieldy under the options API.

The RFC then shows how refactoring this component to use the composition API allowed the functionality to be organized by feature instead of by option thereby restoring readability.

While this example is perfectly illustrative of when the composition API is needed, it left me somewhat confused because this example component is atypically large and complex.

Will the same benefits be accrued with the smaller, "regular" components that I most commonly deal with? To answer this, I think it's worth looking at the conditions under which a component gets so large and complex.

Component composition model

Along with reactivity, the component composition model is a defining characteristic of Vue.js.

While the docs don't explicitly say so, there's an implied aim to have a one-to-one relationship between a component and a "feature" in this model.

For example, a button-based component like the following will usually begin with one feature - to handle clicks it receives.

MyButton.vue

<template>
  <button @click="doStuff">Click me</button>
</template>

But this component could be designed, or unintentionally grow, to include multiple features. For example, what if we decided to make it so this button spawned a drop-down?

At first, we might add the drop-down into the template and component state, but then our understanding of the component composition model would kick in again and we'd be compelled to abstract the new feature into a sub-component thus restoring the one-to-one ratio of components/features.

MyButton.vue

<template>
  <button @click="doStuff">
    Click me
    <drop-down v-bind:some-prop="..." />
  </button>
</template>

Multi-feature components

But there are times when more complex functionality doesn't fit neatly into the component composition model.

A good example of this is validated form inputs. These have multiple features that cannot be easily delegated into sub-components because the features are all complexly tied to the same piece of UI.

In this scenario, you may end up with two distinct features for the component - handling the input and validating the input. Such a component will be much better organized if broken down by feature using the composition API.

ValidatedFormInput.vue

useHandleInput() { ... }
useValidateInput() { ... }
export default {
  setup () {
    return {
      ...useHandleInput(),
      ...useValidateInput()
    }
  },
  ...
}

Logic extraction

Sometimes we want to create variations on a component. For example, we may want a button to have different colors when used in different forms on our site.

The component composition model provides a way of doing this - simply use template functionality driven by state passed as props. Other kinds of variations can be achieved with slots.

SimpleButtonCustomColor.vue

<template>
  <button @click="doStuff" :classes="{ color }">
    Click me
  </button>
</template>
<script>
export default {
  props: {
    color: String
  }
}
</script>

However, this pattern doesn't scale well. As variations become more numerous, or if the component is complex enough that variations are substantially different, they'll make the component progressively messier.

Making multiple variations of the components by abstracting the logic will be the best way forward. The composition API is superior here because it's far easier to abstract code that is already organized by feature.

For example, say you created a submit button component that you want to use across a variety of forms on your site. Template logic has hit its scaling limit, so the composition API would allow you to abstract the general logic into a composition function which, unlike a mixin, can very elegantly be consumed by multiple components:

useSubmitButton.js

export default {
  handleSubmit() { ... },
  ...
}

SubmitButtonFullForm.vue

// General feature
import useSubmitButton from "./useSubmitButton.js";

// Specific feature
function useFullFormButton() { ... }

export default {
  setup() {
    return {
      ...useSubmitButton(),
      ...useFullFormButton()
    }
  }
}

SubmitButtonInlineForm.vue

// General feature
import useSubmitButton from "./useSubmitButton.js";

// Specific feature
function useInlineFormButton() { ... }

export default {
  setup() {
    return {
      ...useSubmitButton(),
      ...useInlineFormButton()
    }
  }
}

Regular components and the composition API

The motivating example from the RFC is atypical in that it's a complex multi-feature component. It's also possible that some of its logic gets reused in other components in the app as well. These attributes make it a perfect candidate for the composition API.

But when components are regular (single-featured and don't require logic abstraction for reuse), what can the composition API offer?

It seems we shouldn't apply the composition API blindly since the RFC states several drawbacks including the confusion between the refs and reactive functions, and the additional boilerplate of the setup function.

In a regular component, the component composition model has not reached its limits, therefore the composition API is not solving any problem, just exposing the component to the stated drawbacks.

But don't use that as a hard rule since the composition API also has some secondary benefits:

Better compatibility with TypeScript
Better access to lower-level features like reactivity
Allows easy integration of pre-packaged features e.g. useWeb

Why not both

In practice, any individual app will likely have some components that could benefit from the composition API, along with many that won't.

I looked through some of the Vue 2 apps I'd previously worked on (mostly small ones) and found that only 10-20% of the components were multi-featured or used mixins and would be stand to benefit from the composition API.

So this doesn't need to be a binary choice...why not just use both APIs together?

On one hand, it has to be optimal to use just one or the other in a project since switching between two APIs will increase cognitive load.

Plus, it may be that you get a smaller build if you only elect to use one of the two APIs as I believe the final release will allow you to tree shake away the API you don't need.

It's not a huge tradeoff, though, so I can see myself using both together when it's called for.

Wrapping up with a guiding principle

The composition API is still technically a proposed feature, so it may change, and even if it doesn't, I'm sure a lot of interesting possibilities will be conceived over time. I'm going to be keeping an open mind about it.

But I promised a guiding principle so here it is:

The composition API can be thought of in the same way as Vuex - it can be a useful tool, but it incurs a cost, so it shouldn't be used thoughtlessly. If you're not sure if you need it, you probably don't.

Even if you don't agree with that, I hope the above was tasty food for thought and I'd be interested to hear your opinion on when the composition API should be used.

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

Handling Events with Vue.js

Anthony Gore — Mon, 06 Jan 2020 00:00:00 +0000

When you build a dynamic website with Vue you'll most likely want it to be able to respond to events.

For example, if a user clicks a button, submits a form, or even just moves their mouse, you may want your Vue site to respond somehow.

Note: this article was originally posted here on the Vue.js Developers blog on 2020/01/06.

Handling events with Vue

We can intercept an event by adding the v-on directive to the relevant DOM element. Let's say we want to handle a click on a button element - we can add the following to our Vue template:

<button v-on:click="clickHandler"></button>

Note that we add an argument to the v-on directive, which will be the name of the event we want to handle (in this case, click).

We then bind an expression to the directive, which will normally be a method you want to use to handle the event. In this case, we've called it clickHandler.

Tip: the v-on directive has a convenient shorthand @ that can be used instead of v-on: like this: <button @click="clickHandler"></button>.

Types of events you can handle

Besides click, what other DOM events can be handled? Vue can handle any kind of web or mobile native event (as well as custom events which we'll talk about later) including:

submit
keyup
drag
scroll

And more. Here's a list of the most common DOM events for your reference.

Event handling methods

If we bind a method to our event handling directive we can now run some custom code.

Let's keep it simple in this example and just log a message to the console, but you could also do something more interesting like show/hide another element, increment a counter, etc.

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

Event object

An event object gets passed to your event handler which opens more possibilities for how you can respond to an event. This object contains a lot of useful properties and methods including a reference to the element where the event originated (event.target), the time the event occurred (event.timeStamp) and more.

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

Note that this object is provided by the native Web API, not Vue, so it will be the same object you'd find in pure JavaScript. Here's the event interface reference for your convenience.

Event modifiers

A common pattern in JavaScript apps is to handle a form submit manually rather than using the native functionality. To do this, you need to use the native preventDefault method of the submit event before running your form handling code, otherwise the page will be redirected before it has a chance to complete.

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

Rather than doing this manually in your handler, Vue offers an event modifier to do this directly from the template. Note the modifier is added after the . in the directive:

<form @submit.prevent="formHandler"></form>

Vue offers several different event modifiers that are useful in common event handling scenarios:

.stop
.prevent
.capture
.self
.once
.passive

Custom events

So far we've been talking about handling native events. But Vue is a component-based framework, so could we make a component emit its own event?

Yes, and this can be very useful. Let's say want a child component to send data up to a parent component. We can't use props here, as prop data only goes from parent to child, and not the other way.

ParentComponent
 |
 | (data travels down via props, never up)  
 v 
ChildComponent

The solution is to have the child component emit an event, and have the parent listen to it.

To do this, call this.$emit("my-event") from the child component when you want the event to be emitted. For example, say we have a component DialogComponent that needs to inform it's parent MainPage that it has been closed:

DialogComponent

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

The parent component can then handle the custom event exactly the same as it would a native event.

MainPage

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

You can also send data in your custom event which can be received in the handling method:

DialogComponent

onClose() {
  this.$emit("dialog-closed", { time: Date.now() });
}

MainPage

eventHandler (event, { time }) {
  console.log(`Dialog was closed at ${time}`);
}

Tip: use kebab-case names for your custom events! HTML is case-insensitive, so a camel-case event name e.g. myEvent will, confusingly, be myevent in the template. So it's best to use kebab-case e.g. my-event and avoid confusion.

Event bus

As we've seen above, a child component can send an event to a parent component. But what if you want a component to send an event to any other component in the hierarchy? For example, a sibling, grand-parent, etc.

To achieve this we can use a pattern called event bus. This is where we create a separate instance of Vue to transport an event to any component that imports it.

First, create and export a Vue instance in a new module file:

eventBus.js

import Vue from "vue";
export default new Vue();

Next, import the bus into a component where you would like to emit an event. You can use the $emit method of you bus Vue instance.

import eventBus from "./eventBus";

export default {
  ...
  methods: {
    myMethod () {
      eventBus.$emit("my-event")
    }
  }
}

Finally, import the bus into a component where you would like to listen to the event. You should then set up a listener somewhere in your code. I suggest you use a lifecycle hook like created as you can access the component instance here.

This is done with the $on method of the bus which takes two arguments - the event you want to listen for, and a callback.

import eventBus from "./eventBus";

export default {
  ...
  created () {
    eventBus.$on("my-event", () => {
      console.log("my-event called on global event bus");
    });
  }
}

And there you have it - a way to share data between any components in your app!

Tip: a more scalable solution for passing data around an app is to use Vuex.

Enjoy this article?

Get more articles like this in your inbox weekly with the Vue.js Developers Newsletter.

Click here to join!

DEV Community: Anthony Gore

Build an Online Course Site with Vue

Set up with Vite

Add router to project

Configure router and create pages

Add pages to App component

Create course data file

Create home page

CourseSummary component

Create course page

LessonSummary component

Create lesson page

Vimeo embed

Lesson page component

Complete and continue button

Reloading page on param change

Add student enrollments

CourseKit

Adding CourseKit to our project

Try CourseKit

Create an online course for developers: idea to launch

About me

About this series

Build an Online Course with React

Set up with Create React App

Configure router and create pages

Add router to project

Add pages to App component

Create course data file

Create home page

CourseSummary component

Create course page

LessonSummary component

Create lesson page

Vimeo embed

Lesson page component

Complete and continue button

Add student enrollments

CourseKit

Adding CourseKit to our project

Join CourseKit as an early user

Introducing CourseKit: headless online course platform

A little background

How CourseKit is different

Want to try CourseKit?

Key features of CourseKit

Secure, role-based API

Student management

JavaScript client library

Markdown-based content

Setting up a course with CourseKit

CourseKit dashboard

CourseKit API

Your course site

Stripe

Vimeo

Join as an early user

Should You Use Composition API as a Replacement for Vuex?

Global reactive state with Composition API

DIY Vuex with Composition API

Vuex pattern

Installing the store with provide/inject

So should you ditch Vuex?

Advantage of Vuex 1: debugging

Advantage of Vuex 2: plugins

Conclusion

Further reading

Vue 3 UX Wins with Async Components & Suspense

Why lazy load components?

Example scenario

Lazy loading with Vue 3 async component API

Loading-state content

Flexible loading state with Suspense

Build a Bootstrap 4 & Vue App

Setting up a Bootstrap and Vue project

Clearing out boilerplate

Bootstrap-Vue components

Configuration with props

Bootstrap-Vue directives

Wrap up