Vue.js Forge
Workshops Swag
Previous Events
binary

Smooth as Butter: From Zero To Deployed Vue 3 + VITE + ButterCMS App

Participants will clone, run, customize, and extend a beautiful, fully-functional Vue 3 + VITE app powered by ButterCMS, a lightning-fast headless CMS that’s consistently among the highest-ranked CMS solutions on G2. Before the end of the session, participants will deploy their apps to a free Vercel account, giving them an attractive addition to their online portfolios.

Team
Maria Violante
Maria Violante
Presented by Vue School
Sold Out
July 27
3:00 PM GMT+2 (3 h)
Online Classroom
FREE

WHO THIS IS FOR

All developers

WORKSHOP OVERVIEW

What will the attendees learn

Participants will clone, run, customize, and extend a beautiful, fully-functional Vue 3 + VITE app powered by ButterCMS, a lightning-fast headless CMS that’s consistently among the highest-ranked CMS solutions on G2. Before the end of the session, participants will deploy their apps to a free Vercel account, giving them an attractive addition to their online portfolios.

Agenda

Introduction and Setup (15 mins):

  • 10 minute presentation:
  • Summarize workshop goals
  • Intro to Butter: Get tokens, clone and run projects. Intro to Butter dashboard.
  • 5 minute coding session. Goals:
  • Make a change to landing page in Butter. Verify change is being pulled into app.
  • Create a blog post in Butter. Verify new post is being pulled into app.

Model a New Page Type (20 mins):

  • 10 minute presentation:
  • Create Gallery Project Page Type, complete with:
  • SEO Component (title, meta description)
  • Headline
  • Description
  • Image/Media Field
  • Link to Repo
  • Collection with Collection Items (Technologies + Languages)
  • Build out 3 pages with sample content
  • Print to console with butter.page.list() and butter.page.retrieve() to demonstrate json response.
  • 10 minute coding session

Break (10 mins)

Integrate Project Detail View (30 mins)

  • 10 minute presentation:
  • Create Project Detail Page in Vue + VITE + test links
  • 20 minute coding session.

Integrate Project List View (15 mins)

  • 5 minute presentation:
  • Create All Projects List View page in Vue + VITE + test links
  • 10 minute coding session:

Break (10 mins)

Add Project Gallery Component to Landing Page (25 mins)

  • 10 minute presentation:
  • Create a new Project Gallery component in Butter with some header text and reference field links to 1 or more project pages.
  • Add a new component to the landing page, pulling in Project Gallery page as items.
  • Link button at bottom to list view for all projects.
  • Add link to navigation menu if time via Butter Collection.
  • 15 min coding session.

Deploy Projects (5 mins)

  • 2 minute presentation (Deploy to vercel)
  • 3 minutes coding session

Outro: 5 mins

Q + A: 15 mins

MEET THE INSTRUCTORS

Picture of Maria Violante
Maria Violante

Budding pythonista and Django enthusiast, currently working with ButterCMS.

Vue.js Forge
Social Media:
Visit Our Previous Events:
Vue.js NationNuxt Nation
Previous Episodes:
July 2022August 2022
© All rights reserved. Made with ❤️ by BitterBrains, Inc.