buttercms / vuejs-starter-buttercms

Drop-in proof-of-concept VueJs app, fully integrated with your ButterCMS account

Vue.js + ButterCMS Starter Project

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, 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/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.

$ echo 'VITE_APP_BUTTER_CMS_API_KEY=<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 start

Congratulations! Your starter project is now live at 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

vuejs-starter-buttercms's Issues

Remove Typescript and set as a plain JS

https://github.com/ButterCMS/vuejs-starter-buttercms/blob/main/src/utils/ButterCMS.ts

please add a space after tags

screenshot
screenshot

Routes are all missing trailing slashes

Per checklist, routes all have trailing slashes, yet routes + links are all missing trailing slashes in app.

We actually need the trailing slashes due to how heroku's proxy-load balancing returns requests for static sites with iframe urls, so this was added to the checklist. Can we please have the links + routes updated to sue trailing slashes?

trailing slash missing from categories button and URL/view

video

Missing one-click deploy button for Vercel in the top section of readme

Please remove unused assets

SCSS files should not be included in this repo, as the src files are all hosted in the butter-starter-front-end repo. Can you please remove the scss files, as well as any static files/assets/images/js that were not explicitly used by the Vue starter?

Mobile Menu loads in opened state

video

Set the default command to run the app to "start" instead of "dev"

and also change in readme pls

Rename the name of the project in package.json

https://github.com/ButterCMS/vuejs-starter-buttercms/blob/main/package.json#L2

Should be the same as repo name - vuejs-starter-buttercms

Final Code overview

Hi @orlyohreally - can we get a final once over on this for code? @gerzitom is aware of the need to pull the unused assets, but everything else looked okay to me :)

Thanks!

Unable to deploy to Vercel using one-click deploy button

build log:

Cloning github.com/prokopsimek/vuejs-starter-buttercms (Branch: main, Commit: e3ce9a4)
--
09:48:58.621 | Cloning completed: 776.107ms
09:48:58.898 | Installing build runtime...
09:49:01.497 | Build runtime installed: 2.598s
09:49:01.812 | Looking up build cache...
09:49:01.982 | Build Cache not found
09:49:02.163 | Detected package.json
09:49:02.164 | Installing dependencies...
09:49:02.166 | Detected `package-lock.json` generated by npm 7...
09:49:15.675 |  
09:49:15.675 | added 218 packages in 13s
09:49:15.676 |  
09:49:15.676 | 32 packages are looking for funding
09:49:15.676 | run `npm fund` for details
09:49:15.965 | Detected `package-lock.json` generated by npm 7...
09:49:15.965 | Running "npm run build"
09:49:16.353 |  
09:49:16.353 | > [email protected] build
09:49:16.353 | > vue-tsc --noEmit && vite build
09:49:16.353 |  
09:49:16.627 | Version 4.5.5
09:49:16.631 | tsc: The TypeScript Compiler - Version 4.5.5
09:49:16.631 |  
09:49:16.631 | COMMON COMMANDS
09:49:16.632 |  
09:49:16.632 | tsc
09:49:16.632 | Compiles the current project (tsconfig.json in the working directory.)
09:49:16.632 |  
09:49:16.632 | tsc app.ts util.ts
09:49:16.632 | Ignoring tsconfig.json, compiles the specified files with default compiler options.
09:49:16.632 |  
09:49:16.632 | tsc -b
09:49:16.633 | Build a composite project in the working directory.
09:49:16.633 |  
09:49:16.633 | tsc --init
09:49:16.633 | Creates a tsconfig.json with the recommended settings in the working directory.
09:49:16.633 |  
09:49:16.633 | tsc -p ./path/to/tsconfig.json
09:49:16.634 | Compiles the TypeScript project located at the specified path.
09:49:16.634 |  
09:49:16.634 | tsc --help --all
09:49:16.634 | An expanded version of this information, showing all possible compiler options
09:49:16.634 |  
09:49:16.634 | tsc --noEmit
09:49:16.634 | tsc --target esnext
09:49:16.634 | Compiles the current project, with additional settings.
09:49:16.634 |  
09:49:16.635 | COMMAND LINE FLAGS
09:49:16.635 |  
09:49:16.635 | --help, -h
09:49:16.635 | Print this message.
09:49:16.635 |  
09:49:16.635 | --watch, -w
09:49:16.635 | Watch input files.
09:49:16.635 |  
09:49:16.636 | --all
09:49:16.636 | Show all compiler options.
09:49:16.636 |  
09:49:16.636 | --version, -v
09:49:16.636 | Print the compiler's version.
09:49:16.636 |  
09:49:16.636 | --init
09:49:16.636 | Initializes a TypeScript project and creates a tsconfig.json file.
09:49:16.637 |  
09:49:16.637 | --project, -p
09:49:16.637 |  
09:49:16.637 | --build, -b
09:49:16.637 | Build one or more projects and their dependencies, if out of date
09:49:16.637 |  
09:49:16.637 | --showConfig
09:49:16.638 | Print the final configuration instead of building.
09:49:16.638 |  
09:49:16.639 | COMMON COMPILER OPTIONS
09:49:16.639 |  
09:49:16.639 | --pretty
09:49:16.639 | Enable color and formatting in TypeScript's output to make compiler errors easier to read
09:49:16.639 | type: boolean
09:49:16.642 | default: true
09:49:16.642 |  
09:49:16.642 | --target, -t
09:49:16.642 | Set the JavaScript language version for emitted JavaScript and include compatible library declarations.
09:49:16.642 | one of: es3, es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021, esnext
09:49:16.642 | default: ES3
09:49:16.642 |  
09:49:16.642 | --module, -m
09:49:16.643 | Specify what module code is generated.
09:49:16.643 | one of: none, commonjs, amd, system, umd, es6, es2015, es2020, es2022, esnext, node12, nodenext
09:49:16.643 |  
09:49:16.643 | --lib
09:49:16.643 | Specify a set of bundled library declaration files that describe the target runtime environment.
09:49:16.644 |  
09:49:16.644 | --allowJs
09:49:16.645 | Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.
09:49:16.645 | type: boolean
09:49:16.645 | default: false
09:49:16.645 |  
09:49:16.645 | --checkJs
09:49:16.645 | Enable error reporting in type-checked JavaScript files.
09:49:16.645 | type: boolean
09:49:16.645 | default: false
09:49:16.646 |  
09:49:16.646 | --jsx
09:49:16.646 | Specify what JSX code is generated.
09:49:16.646 | one of: preserve, react-native, react, react-jsx, react-jsxdev
09:49:16.646 | default: undefined
09:49:16.646 |  
09:49:16.646 | --declaration, -d
09:49:16.646 | Generate .d.ts files from TypeScript and JavaScript files in your project.
09:49:16.646 | type: boolean
09:49:16.646 | default: `false`, unless `composite` is set
09:49:16.647 |  
09:49:16.647 | --declarationMap
09:49:16.647 | Create sourcemaps for d.ts files.
09:49:16.647 | type: boolean
09:49:16.647 | default: false
09:49:16.647 |  
09:49:16.647 | --emitDeclarationOnly
09:49:16.647 | Only output d.ts files and not JavaScript files.
09:49:16.647 | type: boolean
09:49:16.647 | default: false
09:49:16.647 |  
09:49:16.648 | --sourceMap
09:49:16.648 | Create source map files for emitted JavaScript files.
09:49:16.648 | type: boolean
09:49:16.648 | default: false
09:49:16.648 |  
09:49:16.648 | --outFile
09:49:16.648 | Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.
09:49:16.648 |  
09:49:16.648 | --outDir
09:49:16.648 | Specify an output folder for all emitted files.
09:49:16.648 |  
09:49:16.649 | --removeComments
09:49:16.649 | Disable emitting comments.
09:49:16.649 | type: boolean
09:49:16.649 | default: false
09:49:16.649 |  
09:49:16.649 | --noEmit
09:49:16.649 | Disable emitting files from a compilation.
09:49:16.649 | type: boolean
09:49:16.649 | default: false
09:49:16.649 |  
09:49:16.650 | --strict
09:49:16.650 | Enable all strict type-checking options.
09:49:16.650 | type: boolean
09:49:16.650 | default: false
09:49:16.650 |  
09:49:16.650 | --types
09:49:16.650 | Specify type package names to be included without being referenced in a source file.
09:49:16.650 |  
09:49:16.650 | --esModuleInterop
09:49:16.650 | Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility.
09:49:16.651 | type: boolean
09:49:16.651 | default: false
09:49:16.651 |  
09:49:16.651 |  
09:49:16.654 | Error: Command "npm run build" exited with 1

Heroku button not working

Attempted to deploy to heroku,

Build log:

 Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.14.2...
       Using default npm version: 8.5.0
       
-----> Installing dependencies
       Installing node modules
       
       added 218 packages, and audited 219 packages in 7s
       
       32 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
-----> Build
       Running build
       
       > [email protected] build
       > vite build
       
       vite v2.8.6 building for production...
       transforming...
       ✓ 131 modules transformed.
warnings when minifying css:
▲ [WARNING] "@charset" must be the first rule in the file
    <stdin>:3:0:
      3 │ @charset "UTF-8";
        ╵ ~~~~~~~~
  This rule cannot come before a "@charset" rule
    <stdin>:2:0:
      2 │ @import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;...
        ╵ ^
       rendering chunks...
       dist/assets/common-bg.ab1f4e22.svg        0.54 KiB
       dist/assets/testimonial-bg.c6477629.svg   1.08 KiB
       dist/assets/LineIcons.182b2455.eot        136.14 KiB
       dist/assets/LineIcons.0608c818.woff2      61.07 KiB
       dist/assets/LineIcons.2f006ab4.woff       74.64 KiB
       dist/assets/LineIcons.0f4707ff.ttf        135.97 KiB
       dist/assets/LineIcons.e49a4d51.svg        579.60 KiB
       dist/index.html                           1.11 KiB
       dist/assets/index.61976786.js             24.15 KiB / gzip: 10.08 KiB
       dist/assets/index.d745ab39.css            132.55 KiB / gzip: 20.81 KiB
       dist/assets/vendor.644013c7.js            127.57 KiB / gzip: 49.85 KiB
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       
       up to date, audited 29 packages in 912ms
       
       3 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 36.4M
-----> Launching...
       Released v4
       https://testing-vue-js-starter.herokuapp.com/ deployed to Heroku
Build finished

Application log:

2022-03-25T14:03:56.239559+00:00 heroku[web.1]: Starting process with command `npm start`
2022-03-25T14:03:57.519165+00:00 app[web.1]: 
2022-03-25T14:03:57.519181+00:00 app[web.1]: > [email protected] start
2022-03-25T14:03:57.519181+00:00 app[web.1]: > vite
2022-03-25T14:03:57.519181+00:00 app[web.1]: 
2022-03-25T14:03:57.523781+00:00 app[web.1]: sh: 1: vite: not found
2022-03-25T14:03:57.672969+00:00 heroku[web.1]: Process exited with status 127
2022-03-25T14:03:57.817089+00:00 heroku[web.1]: State changed from starting to crashed
2022-03-25T14:04:50.511720+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=testing-vue-js-starter.herokuapp.com request_id=548dabe3-fb51-44e4-b3f9-1a6f8170eb35 fwd="50.124.33.21" dyno= connect= service= status=503 bytes= protocol=https
2022-03-25T14:04:51.017813+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=testing-vue-js-starter.herokuapp.com request_id=43598a96-e33e-4a8a-aa49-2c4ad77fbcdb fwd="50.124.33.21" dyno= connect= service= status=503 bytes= protocol=https

I believe this may be because of VITE link

Customer No API token hero

Currently no api token hero reads: Please add your API token to your .env file.
Please customize this to read: Please add VITE_APP_BUTTER_CMS_API_KEY to your .env file. Set the value as your Butter API Token.

SEO title for tag detail should have name of category in the title and description instead of slug

SEO title for category detail should have name of category in the title and description instead of slug

Draft articles/pages are not visible if var VITE_APP_BUTTER_CMS_PREVIEW is set to "true"

It could be because the SDK accepts just 1 or 0 as the preview parameter. Please, fix it.

Warning in terminal

I'm getting the following warning in terminal: [@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported.

This may just be a linting error, but either way, can it be resolved?

Autoscroll is inconsistent when navigating from another portion of site

video

need to update demo links

We cannot use http://vuejs-starter-buttercms.vercel.app/ as the demo address as this address is already claimed - can you either delete this app or assign control to us, so that we can put in the keys, etc?

Please add Node Badge

Please add node badge to readme showing which version of node should be used to avoid further changes to package-lock.json (node v16)

"/landing-page/" does not pass slug

the landing-page alternate view, /landing-page/<slug>/, is set up, but no matter what slug is used, the page shown is the 'landing-page-with-components' page. This means the user cannot set up a different page with page type of landing-page in butter and test it, such as the 'alternate-landing-page' currently set up in the test account.

It looks like this url routes exclusively to a HomeView, when it should likely route to something like a LandingPageView, with the '/' route passing the 'landing-page-with-components' slug.

MARIA TO DOs:

• add heroku button from top to bottom deploy section
• update vercel links once app url is available.

Rename ENV variables to be prefixed with "VUE_" instead of "VITE_"

Is there any reason to have the name prefixed with "VITE"?

Remove unused assets

https://github.com/ButterCMS/vuejs-starter-buttercms/tree/main/src/assets

See e.g. Express.js changes here: ButterCMS/expressjs-starter-buttercms#10

Please, add Heroku one-click deploy button