Using Contensis with Vue.js

This step-by-step guide will take you through getting your entries from Contensis and displaying them using the Delivery API and a simple Vue.js app.

We'll start by setting up our demo project, which is a simple Vue.js blog application. This app will pull in data from our Leif demo project using Contensis.

1. Log into your GitHub account. If you don't have an account, create one here.
2. Go to https://github.com/contensis/vue-leif-example and press the Fork button to create your own fork of the repo.

Now we have our own fork of the repository, we need to clone it to create a copy of the fork on our local machine. There are two ways to do this – using SSH or HTTPS. If you have already set up SSH keys for your GitHub account, then it's easier to use SSH. If you haven't set up SSH keys, you can use HTTPS instead.

1. First, open up a terminal and cd into your local development folder.
2. Now clone the repository using SSH with the following command:

3. Then navigate to the project directory:

4. Finally, install the project dependencies using npm. Run this command to install all the required packages listed in the package.json file:

If you haven't set up SSH keys for your GitHub account, you can use HTTPS instead of SSH to clone repositories. Use the following steps to configure Git to use HTTPS.

1. Depending on your operating system, open Terminal (on macOS and Linux) or Command Prompt (on Windows).
2. Enter the following commands to configure Git with your GitHub credentials:

3. Now enter the following command to clone the repository using HTTPS:

4. Then navigate to the project directory:

5. Finally, install the project dependencies using npm. Run this command to install all the required packages listed in the package.json file:

Now we've installed the project and its dependencies, we can run the Leif Vue.js app locally on our machine. To run your project locally, enter the following command in your terminal:

This will start the server. You can then access the application by visiting http://localhost:8080 in your web browser.

The application should look something like this:

At the moment the application is using data from our public demo environment. To start using your own data, you'll need to connect your own Contensis environment. Follow these steps to connect a free trial environment:

1. Create an account with Contensis or log in.
2. Navigate to your account dashboard and launch your free trial environment. (If you don't have a free trial, you can request one here).
3. The first thing we need to do is update the VUE_APP_ACCESS_TOKEN in the .env file. Go to Settings > Access token in your Contensis project to open the Environment Access Token screen. Copy your access token.
4. Open the .env file in your IDE again and replace the VUE_APP_ACCESS_TOKEN with the access token from your Contensis environment.

5. You now need to replace the VUE_APP_PROJECT_API_ID in the .env file with the API ID from your own project. In your Contensis project, go to Settings > General and copy the API Name field.

6. Open the .env file in your IDE again and replace the VUE_APP_PROJECT_API_ID with the API ID from your Contensis project.
7. Finally, determine your VUE_APP_ALIAS by examining your CMS URL, for instance, cms-leif.cloud.contensis.com. Extract the part that follows cms-. In this example, the REACT_APP_ALIAS would be 'leif'.

That's it, you're all set up! 👏