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

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