Code Monkey home page Code Monkey logo

nuxt3-wp-blog's Introduction

Nuxt 3 WP Blog

We are going to build a Nuxt3 blog with WordPress as a backend. We will use the WordPress REST API to fetch the data from WordPress and display it on our Nuxt3 blog.

Full Video Link

Topics

  • Brief introduction to Nuxt3
  • Brief introduction to WordPress Rest API
  • Create a Nuxt3 project
  • Create a WordPress project
  • Nuxt3 Directory Structure
  • Designing the Home Page
  • Designing the Post Page
  • Designing the Category Page
  • Creating Reusable Components
  • Making the code reusable using composables
  • Deploying to Vercel

Usage

Copy the .env.example file to .env and fill the values.

cp .env.example .env

Install the dependencies

npm install # or yarn install

Run the development server

npm run dev # or yarn dev

Deployment

Vercel deployment is already covered in the video.

For digital ocean deployment, follow the Digital Ocean Deployment Guide.

Contributions & Issues

Please feel free to raise an issue for suggestions or bugs. You can ,essage me on twitter @jahidDev.

License

The project is released under the WTFPL2 Do What The F*ck You Want To Public License.


jahid.dev  ·  YouTube @jahidanowar  ·  Twitter @jahidDev  ·  Instagram @jahidDev

nuxt3-wp-blog's People

Contributors

jahidanowar avatar

Stargazers

Tuíris avatar  avatar ikk avatar Wasin Raktham avatar PeWe79 avatar Marx L Canaza avatar Suleiman Leadbitter avatar Nick Iv (Full-stack web-developer) avatar wdalhaj avatar Habibi avatar Nicolas Bernaux avatar  avatar  avatar  avatar Wendelin Gerein avatar Matteo Azzolini avatar Janusz Jasinski avatar Mayuthean avatar NativeBase avatar Ayu Ariningsih avatar Ilgar Abdullazade avatar Jesus Alejos avatar The Josh Man avatar BigGreenReset avatar Віталій Копилов avatar Daniel König avatar Sarvar avatar Totaku avatar Nikita Rusetskii avatar saeed javadzadeh avatar Özay Özdemir avatar Damián Alfieri avatar  avatar Adorján Márk avatar  avatar Budi Cahyono avatar  avatar Mr. Nasıl avatar Ibrahim Tahir avatar Vasilis Bakas avatar Ray Guo avatar Oria avatar René avatar Adhitya Tri avatar Ensar Koraş avatar  avatar Guillaume avatar Al Asad Nur Riyad avatar  avatar Esmattoha Mondal avatar

Watchers

James Cloos avatar  avatar  avatar

nuxt3-wp-blog's Issues

Null feature images

When there are no feature images, the code below does not work:
:image="post._embedded['wp:featuremedia'][0]?.source_url"
and gives the following error:

500
Cannot read properties of undefined (reading '0')

I found the following code on the internet which prints if images and posts are available and returns blank if not.
Apparently, everything is correct:
:image="post && post._embedded && post._embedded['wp:featuredmedia'] ? post._embedded['wp:featuredmedia'][0].source_url : ' '"

Do you have a better approach?

Use nuxt image

Please install nuxt image in content section I mean v-html

composable functions throw errors

with the current composable file from the youtube video and the repo, i get the following error:

GET http://localhost:3000/undefined/wp-json/wp/v2/posts?page=1&per_page=20&_embed=1

404 Page not found: /undefined/wp-json/wp/v2/posts?page=1&per_page=20&_embed=1

the code wants me to format it like this:

const { data: posts } = await (await useWpApi()).getPosts();

but this does not work either and i get:

http://localhost:3000/undefined/wp-json/v2/posts

is there something on the wordpress dashboard side of things that you've done that is required that i've overlooked on youtube? if so, could you provide it in the readme file?

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.