Code Monkey home page Code Monkey logo

nuxt-starter-prismic-blog's Introduction

Prismic + Nuxt Blog Starter

This sample blog is an excellent starting point to explore Nuxt and Prismic. Get it up and running in minutes. Modify and adapt it to your liking; it's all yours!

ย 

Screenshots of the site seen on deskop and mobile browsers

ย 

๐Ÿš€ Quick Start

To start a new project using this starter, run the following commands in your terminal:

npx degit prismicio-community/nuxt-starter-prismic-blog your-project-name
cd your-project-name
npx @slicemachine/init@latest

The commands will do the following:

  1. Start a new Nuxt project using this starter.
  2. Ask you to log in to Prismic or create an account.
  3. Create a new Prismic content repository with sample content.

When you're ready to start your project, run the following command:

npm run dev

Documentation

To learn how to work with your new project, see this starter's docs.

To learn more about working with Prismic, see the Prismic docs.

License

Copyright 2013-2023 Prismic <[email protected]> (https://prismic.io)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

nuxt-starter-prismic-blog's People

Contributors

a-trost avatar angeloashmore avatar hypervillain avatar levimykel avatar lihbr avatar mdeclercq avatar phillysnow avatar pvpg avatar samlfair avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nuxt-starter-prismic-blog's Issues

Preview page throws errors on nuxt generate

Hi there @levimykel, with a fresh clone of this repo I'm getting an error from the preview page when I run npm run generate. It seems to be originating from the api.previewSession call, which uses the node-fetch package. Any ideas how to resolve this?

ERROR   /Preview

TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/cross-fetch/node_modules/node-fetch/lib/index.js:1284:9)
    at /Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/cross-fetch/node_modules/node-fetch/lib/index.js:1370:19
    at new Promise (<anonymous>)
    at Object.fetch (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/cross-fetch/node_modules/node-fetch/lib/index.js:1367:9)
    at Object.fetch (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/cross-fetch/dist/node-ponyfill.js:10:20)
    at /Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:15462
    at u (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:15788)
    at t.request (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:15965)
    at t.request (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:18843)
    at /Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:4349
    at new Promise (<anonymous>)
    at t.previewSession (/Users/brittanychiang/Documents/personal/nuxtjs-blog/node_modules/prismic-javascript/dist/prismic-javascript.min.js:1:4310)
    at asyncData (prismic.config.js:5:0)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Realtime blog post updates

I used the same project and uploaded it on Netlify with command generate.
Everything works fine, however how should I update the blog right away when I make a new post ?

I tried to remove static module but then on the dynamic links i get 404 errors.
I'm guessing i'm missing something or doing wrong.

Generate pages fails with: Cannot read property 'split' of undefined.

I have migrated to the new implementation for Nuxt, but when I'm running a build or generate it fails with:

FATAL  Cannot read property 'split' of undefined                                                                                   
  at extractPayload (modules/static/index.js:9:26)
  at modules/static/index.js:53:27
  at node_modules/hable/lib/hookable.js:50:45
  at node_modules/hable/lib/utils.js:15:67
  at runNextTicks (internal/process/task_queues.js:58:5)
  at listOnTimeout (internal/timers.js:501:9)
  at processTimers (internal/timers.js:475:7)
  at async Nuxt.callHook (node_modules/hable/lib/hookable.js:50:7)
  at async Generator.generateRoute (node_modules/@nuxt/generator/dist/generator.js:264:5)
  at async node_modules/@nuxt/generator/dist/generator.js:120:13
  at async Promise.all (index 0)
  at async Generator.generateRoutes (node_modules/@nuxt/generator/dist/generator.js:115:7)
  at async Generator.generate (node_modules/@nuxt/generator/dist/generator.js:48:20)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:103:24)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2575:7)


   โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
   โ”‚                                                          โ”‚
   โ”‚   โœ– Nuxt Fatal Error                                     โ”‚
   โ”‚                                                          โ”‚
   โ”‚   TypeError: Cannot read property 'split' of undefined   โ”‚
   โ”‚                                                          โ”‚
   โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ

error Command failed with exit code 1.

logging chunks[0] will return an string:

[ 
<!doctype html>                                                                                                                      15:03:06
<html>
  <head>
    <title>website</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="website"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/e7fdf3df281ae824687b.js" as="script"><link rel="preload" href="/_nuxt/3cbd4a77f9f7971031a0.js" as="script"><link rel="preload" href="/_nuxt/9da01e9244986ae9c38e.js" as="script"><link rel="preload" href="/_nuxt/90f48cfec504134a8a60.js" as="script">
  </head>
  <body>
    <div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #3edb58;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div>
  <script type="text/javascript" src="/_nuxt/e7fdf3df281ae824687b.js"></script><script type="text/javascript" src="/_nuxt/3cbd4a77f9f7971031a0.js"></script><script type="text/javascript" src="/_nuxt/9da01e9244986ae9c38e.js"></script><script type="text/javascript" src="/_nuxt/90f48cfec504134a8a60.js"></script></body>
</html>
]

logging chunks[1] will return undefined

Dependencies:

"dependencies": {
	"@nuxtjs/axios": "^5.9.6",
	"@nuxtjs/prismic": "^1.1.1",
	"@nuxtjs/style-resources": "^1.0.0",
	"kinet": "^2.2.1",
	"nuxt": "^2.12.1",
	"nuxt-property-decorator": "^2.5.1",
        "prismic-javascript": "^2.1.5",
	"prismic-vue": "^2.0.0"
},
"devDependencies": {
	"@nuxt/typescript-build": "^0.6.1",
	"@nuxtjs/stylelint-module": "^3.2.2",
	"@types/prismic-dom": "^2.1.1",
	"@vue/test-utils": "^1.0.0-beta.32",
	"babel-jest": "^25.2.4",
	"eslint": "^6.8.0",
	"eslint-config-prettier": "^6.10.1",
	"eslint-plugin-prettier": "^3.1.2",
	"jest": "^25.2.4",
	"node-sass": "^4.13.1",
	"prettier": "^2.0.2",
	"sass-loader": "^8.0.2",
	"stylelint": "^13.2.1",
	"stylelint-config-standard": "^20.0.0",
	"tslint": "^6.1.0",
	"vue-jest": "^3.0.5"
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.