buttercms / nuxtjs-starter-buttercms Goto Github PK

Drop-in proof-of-concept Nuxt.JS, fully integrated with your ButterCMS account

Home Page: https://nuxtjs-starter-buttercms.vercel.app

CSS 9.03% Vue 80.37% TypeScript 8.01% JavaScript 2.54% Procfile 0.05%

butter buttercms cms nuxt nuxtjs starter-project vercel

nuxtjs-starter-buttercms's Introduction

Nuxt.js + ButterCMS Starter Project

This Nuxt.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, or you can click the button below to deploy your own copy of our starter project to the provider of your choice.

1. Installation

First, clone the repo and install the dependencies by running npm install

git clone https://github.com/ButterCMS/nuxtjs-starter-buttercms
cd nuxtjs-starter-buttercms
npm install

2. Set API Token

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

$ echo 'NUXT_ENV_BUTTER_API_TOKEN=<Your API Token>' >> .env

3. Run local server

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

$ npm run dev

Congratulations! Your starter project is now live at http://localhost:3000/.

4. Deploy

Deploy your Nuxt.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: NUXT_ENV_BUTTER_PREVIEW=false

nuxtjs-starter-buttercms's People

Contributors

Watchers

Forkers

gerzitom grarizki stevenvz-org ry-jp mariariosnavarro

nuxtjs-starter-buttercms's Issues

Breadcrumb menu behavior is inconsistent

https://share.getcloudapp.com/bLuB17rp <-- the word "blog" with corresponding link sometimes disappears from the breadcrumb menu for categories and tags

question re: env variable

The current env variable is listed as: NUXT_ENV_APP_BUTTER_CMS_API_KEY - this is a bit long and the pattern doesn't match our other projects. Is this because the NUXT_ENV_APP prefix is required by nuxt.js?

Review

Overall looks good just some questions:

I'm getting this error message when I build the app: https://share.getcloudapp.com/xQuwZzKz. Should that be fixed?
Somewhere the imports are made using relative paths and some of them are not https://share.getcloudapp.com/rRuOvNEE. Is there a reason why?
Is this page used https://github.com/ButterCMS/nuxtjs-starter-buttercms/blob/master/pages/test.vue?

Ownership of vercel link

Hi @gerzitom - can you either change the url for your currently deployed version of the nuxt.js app or transfer the ownership of the app to us (delete might be easiest?) That URL pattern matches what we're currently using for our "official" demo links, so we'd like to have that one 😄

Thanks!

Draft changes not working for pages or menu items

Video demo

Draft changes to pages and to menu items are not showing up in the app, even when local server is shut down and restarted. With the previewing function enabled (or not explicitly disabled), user should be seeing draft changes in their local app.

Force trailing slashes

right now, routes both with and without trailing slashes work, e.g., /blog and /blog/
Is it possible to force trailing slashes here, so that routes always use trailing slashes once page loads?

If it's difficult / cumbersome, we can probably skip it - but we've had issues in the past with iframe preview + heroku if trailing slashes are not enforced, because of the way heroku handles proxy load balancing

@orlyohreally im going to tag you on this in case there's a follow up question while i'm on vacation

Nuxt 3.3.0 support broken

Description

Cloning the repository and npm install results in an installation of Nuxt v3.0.0-rc.3 - and ButterCMS works as expected.

The strange issue that package.json refers to nuxt3@latest which should install Nuxt 3.3.0 (true at the time of writing).

To Reproduce

Replace the value of nuxt in package.json with 3.2.3 or above. Rerun npm i

[Vue Warn] Component ButterCMS Nuxt Starter Project is missing template or render function.

Expected behavior

NPM should always install the latest Nuxt package.
ButterCMS should work on new stable version.

Desktop

OS: Windows 11
Browser Firefox
Node 18