Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/buttercms/vue-workshop-7-27-22

An expanded version of our VueJS Starter Project with additional content created during the 7/27/2022 VueJS Forge Workshop
https://github.com/buttercms/vue-workshop-7-27-22

starter-project vite vue vuejs

Last synced: 6 days ago
JSON representation

An expanded version of our VueJS Starter Project with additional content created during the 7/27/2022 VueJS Forge Workshop

Host: GitHub
URL: https://github.com/buttercms/vue-workshop-7-27-22
Owner: ButterCMS
Created: 2022-07-22T16:30:13.000Z (over 2 years ago)
Default Branch: tutorial
Last Pushed: 2022-12-20T15:52:04.000Z (almost 2 years ago)
Last Synced: 2023-03-25T20:10:49.797Z (over 1 year ago)
Topics: starter-project, vite, vue, vuejs
Language: Vue
Homepage:
Size: 28.6 MB
Stars: 4
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![recommended node version](https://img.shields.io/badge/node-v16-green)

# Vue.js + ButterCMS Starter Project

***Note: This is an expanded version of our Vue.js starter project that adds content created during a workshop during the VueJS Forge event on July 27th, 2022 and will not be maintained. To see the most up-to-date version of the Vue.Js starter, visit the main source repo at [https://buttercms.com/starters/vuejs-starter-project/](https://buttercms.com/starters/vuejs-starter-project/)***

Video of the workshop:
- https://cdn.buttercms.com/W6FyqiWSsdlciwXsOcAB

Supplementary videos referenced during workshop:
- https://cdn.buttercms.com/vS7RWnRPKhxJDJLJNwwj - Setting up your portfolio page type in Butter
- https://cdn.buttercms.com/NUzQovdwSYuLqMMUaMDb - Adding portfolio component to landing page.
***

This Vue.js starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.

You can view a [live demo hosted on Vercel](http://vuejs-starter-buttercms.vercel.app/), or you can click the button below to deploy your own copy of our starter project to the provider of your choice.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fvuejs-starter-buttercms&env=VITE_APP_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=vuejs-starter-buttercms&repo-name=vuejs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Vue.js%20Starter%20Demo&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=http%3A%2F%2Fvuejs-starter-buttercms.vercel.app%2F&repository-name=vuejs-starter-buttercms&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY)
[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ButterCMS/vuejs-starter-buttercms&env%5BVITE_APP_BUTTER_CMS_API_KEY%5D=check%20https://buttercms.com/settings)

## 1. Installation

First, clone the repo and install the dependencies by running `npm install`
```shell
git clone https://github.com/ButterCMS/vuejs-starter-buttercms
cd vuejs-starter-buttercms
npm install
```

### 2. Set API Token

To fetch your ButterCMS content, add your API token as an environment variable.

```bash
$ echo 'VITE_APP_BUTTER_CMS_API_KEY=' >> .env
```

### 3. Run local server

To view the app in the browser, you'll need to run the local development server:

```bash
$ npm run start
```

Congratulations! Your starter project is now live at [http://localhost:3000/](http://localhost:3000/).

## 4. Deploy
Deploy your Vue.js app using Vercel, the creators of Next.js, or with Heroku. With the click of a button, you'll create a copy of our starter project in your Git provider account, instantly deploy it, and institute a full content workflow connected to your ButterCMS account. Smooth.

## 5. Previewing Draft Changes
By default, your starter project is set up to allow previewing of draft changes saved in your ButterCMS.com account. To disable this functionality, set the following value in your .env file: VITE_APP_BUTTER_CMS_PREVIEW=false