2020-03-19
1269
#js libraries#nuxtjs
Daniel Phiri
15892
Mar 19, 2020 ⋅ 4 min read

Delivering content with Strapi and Nuxt

Daniel Phiri Open Source Advocate. Technical Writer and Speaker. Community Lead and Builder.

Recent posts:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
View all posts

10 Replies to "Delivering content with Strapi and Nuxt"

  1. Thank you for a great article on how to use Nuxt with Strapi + GraphQL.

    One thing. You can install GraphQL in strapi from the marketplace in the strapi admin. Then you reach the GraphQL playground via localhost:1337/graphql.

  2. Thanks for catching that Christher – making changes now. Glad you liked it by the way.

  3. Hey Daniel, very appreciate your article, but unfortunately i got stuck at this problem:

    ERROR in ./pages/index.vue?vue&type=script&lang=js&
    Syntax Error: Unexpected character ‘​’ (30:0)

    28 |
    29 |
    > 30 | ​​export default {
    | ^
    31 | ​​ data() {
    32 | ​​ return {
    33 | ​​ albums: [],

    Could you help me to solve that? :/

    Best wishes

    1. Hey Ben! I can’t seem to see what the problem might be from the snippet you sent. Could you share a gist of the file? Do check that statement is in a tag though

  4. Hey Ben, I have the same problem as you, did you happen to find what was causing that problem ?

    Thanks

  5. To help anyone with the script tag throwing an error, here is a snippet of which i use that gets around the error:

    import Layout from ‘~/layouts/Default’;
    import placesQuery from ‘~/apollo/queries/places/place’;

    export default {
    data() {
    return {
    // Initialize an empty places variable
    places: [],
    query: ”
    }
    },
    apollo: {
    places: {
    prefetch: true,
    query: placesQuery
    }
    },
    computed: {
    // Search system
    filteredList() {
    return this.places.filter(place => {
    return place.name.toLowerCase().includes(this.query.toLowerCase())
    })
    },
    },
    head: {
    title: ‘My Places’
    }
    }

  6. Hey, sorry for my late reply – i did solve the problem, simply copied the code again from above and paste it in. Didn’t find any reason why it doesn’t work in the first approach.

Leave a Reply