Introduction to Gridsome

Felix Nana Yaw Yeboah-Jefferson — Sun, 23 Jun 2019 11:53:48 +0000

Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.

Why Gridsome?

Local development with hot-reloading - See code changes in real-time.
Data source plugins - Use it for any popular Headless CMSs, APIs or Markdown-files.
File-based page routing - Quickly create and manage routes with files.
Centralized data managment - Pull data into a local, unified GraphQL data layer.
Vue.js for frontend - A lightweight and approachable front-end framework.
Auto-optimized code - Get code-splitting and asset optimization out-of-the-box.
Static files generation - Deploy securely to any CDN or static web host.

Learn more about how Gridsome works

1. Install Gridsome CLI tool

Using yarn:
yarn global add @gridsome/cli

Using npm:
npm install --global @gridsome/cli

2. Create a Gridsome project

gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to open folder
gridsome develop to start local dev server at http://localhost:8080
Happy coding 🎉🙌

3. Next steps

Create .vue components in the /pages directory to create page routes.
Use gridsome build to generate static files in a /dist folder

Setting dynamic background images in Nuxt

Felix Nana Yaw Yeboah-Jefferson — Fri, 01 Mar 2019 08:43:06 +0000

I had a few problems days ago with how to set dynamic background images in Nuxt. I tried different ways of pulling this one out and yet I wasn't able to till yesterday. By the way, this is my first time using Nuxt for a project and I suggested this in the new firm I recently joined. Since I suggested it, I might as well be the first person to use it on our website. So yes, I started using the framework and I had a few challenges but throughout the journey, I found solutions to those challenges and yes I say, its a great learning curve and it also gave me the opportunity to explore more with the framework. Back to the challenge I faced, this challenge was something else. I did a lot of googling and also finding solutions online but none worked till I played around and found a solution. I shared my solution to few people and communities who might be in need also and I found this community to be a great one, decided to create an account and also share this here. I don't know but it might also help someone, if not today, might be tomorrow or another day.

So I began by creating a computed property and created backgroundURL within the computed property and return the looped dynamic background images. The main problem why dynamic images does work when used on an element or a div is because, you should require the images and since there's no way of requiring, that's why i created a computed proptery and required the images and after called the property on background image.

I bind the style since its a dynamic background-image and within the URL link, i placed in the computed property i created for the background image and added some styles to make the image look good.

This is the end results of the dynamic background images with style in NUXT

I used the same procedure and also created something nice with it for the services section.