How to Build a blog using Strapi, Nuxt (Vue) and Apollo

1

Sometime ago, I was thinking about my internet habit and, more specifically, what I really like when I'm reading stuff. Here’s what I usually do: I run a query, and then I just let myself be guided by the most interesting links. I always find myself reading blog posts about someone’s experience that is entirely unrelated to the query I initially typed.

This is a companion discussion topic for the original entry at https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo
2

Hello, Thanks for this atricle, i have a problem:
where is location for @assets/css/main.css in my frontend project?
i have to create main.css beside uikit.js?
Thanks

4

hi mehdi, frontend in this tut is vue(nuxt by the way),you can add it in your nuxt.config.js like this

export default {
css: [
    '@/assets/main.css',
  ],
}

or if if you want to use in one page head you can add it to layout or in head of your page.vue like this

head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "/asset/css/main.css"
        },
      ],
}
}

and if its not for whole project you can do it at the end of your component too

<style scope>
some property: some value
/* you can remove scope */
</style>
5

Hello, thanks for this article!

I juste have a little question : do you know how to “orderby” in your .gql files ?

Thanks

6

The article was interesting and the one problem faced was that , when I visit an article it throw undefined error. This is due to the delay getting the data from apollo. So I go with computed property and check the the null with v-if in the template
here is then snippets I used

  computed:{
        getArticle() {return  this.article.data.attributes ? this.article.data : null }
      },

in the template

        <div
          v-if="getArticle"
          id="banner"
          class="uk-height-small uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding"
          :data-src="api_url + getArticle.attributes.image.data.attributes.url"
          uk-img
        >
          <h1  v-if="getArticle">{{ getArticle.attributes.title }}</h1>
        </div>

Hope this will help someone.

Thank you, good work
Manoj from India
[Blog](https:// javascriptsu.wordpress.com)

8

Found this super interesting

For me adding a

<div v-if="!this.$apollo.loading">

at the main div worked for articles, still can’t get categories to display though for some reason

Gibbo

9

hello. Thank you for the guide.

I have a problem with vue of the article
зображення
for some reason it cannot find images

10

For anyone who can’t get the categories page to work, it’s because the GQL query in the walk-through is wrong. Change it to:

    query Categories($id: ID!){
      category(id: $id) {
        data {
          id
          attributes {
            name
            articles {
              data {
                id
                attributes {
                  title
                  content
                  image {
                    data {
                      attributes {
                        url
                      }
                    }
                  }
                  category {
                    data {
                      id
                      attributes {
                        name
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
1 Like