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.

I hope this helps someone and I am available to anyone who has questions or doesn't understand anything, feel free to hit me up on here or twitter @jaeyholic.