How to Create Landing Pages for Your Vue Application with ButterCMS

Landing pages are unique web pages that users visit through promotional and marketing campaign links in order to access the promoted offer and/or product information. Users typically encounter this page first after clicking on a promotion or advertisement on third-party sites, therefore it’s safe to assume that in many cases this landing page will heavily influence the first impression a visitor has of your brand. 

In this tutorial, we will broaden your horizons on what is possible when you create and add landing pages to your Vue application using ButterCMS. Throughout this tutorial, you will learn how to leverage the power of ButterCMS to quickly create, design, and publish dynamic landing pages that seamlessly integrate with your Vue application.

Why use Vue?

Vue is an open-source, lightweight, and progressive JavaScript framework that can be used to construct any user interface. Because of its familiar templating syntax and component use, integrating and moving existing applications to Vue is fast and smooth.

The idea behind Vue was to build a custom and easily integrable tool with a low learning curve—making it easy for anyone with an understanding of JavaScript to pick it up quickly. Other benefits of using Vue include its component-based architecture, reusability, high performance, and great community. The data binding and data-driven technique of interfacing with an HTML-based Document Object Model (DOM) is favored over working directly with the DOM.

Why use ButterCMS?

ButterCMS is a headless content management system (CMS) that comprises a dashboard and content API. It is simple and easy to integrate into any application or framework. Additionally, it comes with a robust library of website components (including the ability to create custom components) to help eliminate the stress of complex configurations, if you choose to use them. 

With the dashboard, users can access and utilize a graphical and structural representation of the schemas they want to build and then, with the endpoints or APIs, deliver the content to whatever channel they intend once that content is published. This simplicity allows complex logic to be easily implemented within a few minutes. 

Here are a few reasons you might consider using ButterCMS to power your landing page:

• Content modeling: ButterCMS's user-friendly interface allows users to specify the structure and relationships of their content through content modeling.

• Content types: When building a landing page, users can leverage ButterCMS content types to create models for each landing page section. Using page types, collections, components, and pages.

• Easy-to-use plugin: ButterCMS's API enables users to access CMS content, which can be integrated into any programming language or framework.

• WYSIWYG editor: Content creators can use the WYSIWYG editor provided by ButterCMS to add and format text, images, videos, and other media in their articles. The editor supports various formats, such as markdown and HTML.

Tutorial prerequisites

To follow along with this tutorial, the following requirements are needed:

• Knowledge of Vue and the optional API

• Knowledge of Git and GitHub

• ButterCMS account

• NodeJS installed in your system

Without any further ado, let’s get started!!!

Tutorial objective

In this tutorial, we’ll set up Butter’s dynamic landing page content and populate our landing page with the content from our dashboard. To get started, clone the starter file from GitHub.

Next, install and run the necessary dependencies needed for the project using the command below.

yarn && yarn dev

With all this done, you should see your landing page as shown below.

Setting up ButterCMS

With our project running, let’s set up and populate our ButterCMS project with data that we’ll be using later on in our Vue app.  Click here to create a ButterCMS account if you don't have one. 

You’ll be redirected to the ButterCMS dashboard when your account is successfully created. Choose the Vue.js framework from your ButterCMS dashboard to reveal your API_KEY.

Next, copy the API_KEY from your dashboard to your project.

Finally, create a .env.local file in your root directory and add the code block below to it.

VITE_BUTTER_API_KEY="YOUR_BUTTERCMS_API_KEY"

Project structure

Before taking a big dive into creating our ButterCMS data, it’s best we understand our project structure to give a better understanding of how to go about our data creation. 

As seen in the diagram above, our application is divided into four sections, namely the Header,  Features, Offers, and Footer sections. The Header and Footer sections will contain basic images and text, while the Features and Offers sections will contain reusable components.

Building our landing page in ButterCMS

Let’s start by using ButterCMS to create our landing page for our Vue application. 

Creating the Header and Footer components

To create our Header component, navigate to the Components configurator by clicking on the plus (+) symbol next to Components in the Content Types menu tab.

In the Components configuration editor, add the following fields:

• Media for image 

• Short text for title 

• Long text for description

Click on the Create Component button at the top of the page and give it a name in the popup modal to save the changes. Here, we’ve named it “Header Component”.

Repeat the same process for the Footer component using the schema below in the component configurator.

• Media for logo 

• Short text for developer 

After creating the Footer component, save it as Footer Component.

Creating the Features and Offers collections

In the previous section, we used components to render our header and footer. This is because they don't contain any content that would be referenced on multiple pages (though some may choose to do so with a footer). This is unlike the Features and Offers sections, where each entry has the same field configuration and will most likely be referenced on multiple pages and sections, such as a dedicated features page, offers page, or even other landing pages.

Collections are reusable data tables that multiple pages can reference. There are many use cases for collections in ButterCMS, which are discussed in their knowledge base. 

Let’s start creating our collection for the Features section. Head to the collections editor by clicking the plus icon next to the Collections option in the Content Types tab menu. 

 Next, configure your collection to have the following fields below:

• Short text for feature_title

• Long text for feature_desc

• Number for id

• Media for image

Finally, provide a name for the collection and save it. In this tutorial, we’ll name the collection “features”.

Repeat the same process discussed in this section for the Offers collection using the schema below and click the Save as a Collection button:

• Short text for main_title

• Short text for subtitle

• Long text for description

• Media for image1

• Media for image2

• Media for image3

• Number for id

Below is what the configuration should look like:

Having completed the process above, navigate to the Collections section and click on the newly created features collection. 

Next, add content to the fields in the collection item. Use the assets from our Vue project. Then, click the Publish button.

Add as many feature collection items as you want. We’ll add four feature collection items for this project. After adding the data, remember to click the Publish button to save the changes.

We’ll be repeating the same process for the Offers collections. Click the plus (+) button beside the offers collection.

Next, add content to the collection item using the assets from our Vue project. In this tutorial, we’ll be creating two offers.

Creating our landing page

Finally, let’s put all the data together into a page in ButterCMS. Let’s head over to Pages by clicking on the Pages tab, then click on New Page at the top right corner. 

In the Pages configuration editor, we’ll be adding the following fields.

• The Header component (select this from the components library)

• The Footer component (select this from the components library)

• A Reference named feature (this references the feature collection)

• A Reference named offers (this references the offers collection)

After adding the above fields, click on the Save button and provide a page title and API slug. In this tutorial, we’ll be saving the page as Landing Page.

After saving, we’ll be filling in the Home and Footer components with content from our cloned Vue application.

Finally, click the Add Reference button, select all the collection items created earlier, and click the Publish button.

Populating our Vue landing page with ButterCMS data

With our ButterCMS dashboard filled with our data, let’s populate our landing page with this data.

Before retrieving the data, let’s install the ButterCMS API client into our project. Head to your code editor and run the command below in your terminal to install the ButterCMS API client.

yarn add buttercms

Retrieving data from ButterCMS

In this section, we’ll be retrieving our data from ButterCMS and then passing the data as props to the components that depend on them. Head over to the Apps.vue file and update the file with the code block below.

<script setup>
import Header from "./components/HeaderSection.vue";
import Features from "./components/FeaturesSection.vue";
import Offers from "./components/OffersSection.vue";
import Footer from "./components/FooterSection.vue";
import { ref, onMounted } from "vue";
import Butter from "buttercms";


const headerComponent = ref(null);
const footerComponent = ref(null);
const offersContent = ref([]);
const featuresContents = ref(null);


onMounted(() => {
 const butter = Butter(import.meta.env.VITE_BUTTER_API_KEY);


 butter.page
   .retrieve("*", "landing-page")
   .then((resp) => {
     const { offers, header_component, footer_component, features } = resp.data.data.fields;


     headerComponent.value = header_component;
     footerComponent.value = footer_component;
     featuresContents.value = features;
     offersContent.value = offers;
   })
   .catch(function (resp) {
     console.log(resp);
   });


});
</script>


<template>
 <div class="relative">
   <Header v-if="headerComponent != null" :headerComponent="headerComponent" />
   <Features v-if="featuresContents != 0" :featuresContents="featuresContents" />
   <Offers v-if="offersContent.value != 0" :offersContent="offersContent" />
   <Footer v-if="footerComponent != null" :footerComponent="footerComponent" />
 </div>
</template>

In the code block above, we’re fetching data from the ButterCMS API using the Butter client library, which is imported at the beginning of the script. We’re also importing several Vue components that render different landing page sections.

We’ve also created reactive variables using the ref function from Vue. These variables are used to store data retrieved from the API. The onMounted lifecycle hook is used to fetch data from the API when the component is mounted. The data is then stored in the reactive variables created earlier.

The fetched data is then used to conditionally render the imported components in the template using the v-if directive. If the data for a particular section has not yet been loaded or is null, that section will not be rendered. This prevents any errors from occurring due to missing data.

Populating the Header component

In this section, we’ll populate the HeaderSection  component with the data passed down as props from the Apps.vue file.

<script>
export default {
 name: "Header",
 props: ["headerComponent"],
};
</script>

In the code block above,  we’re using the headerComponent prop to pass in the data from the App.vue file, which will be used in our template.

Next, let’s add the data to our template. Copy the code below and update the