#js libraries#nuxtjs
Daniel Phiri
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:

Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
Implementing Advanced Features With The Navigator.Share API

Implementing advanced features with the navigator.share API

Explore advanced capabilities for content sharing with the navigator.share API, including dynamic content sharing, custom share targets, and batch sharing.

David Omotayo
Nov 29, 2023 ⋅ 10 min read
Chas Peacock Leader Spotlight

Leader Spotlight: Scaling for the next phase of growth with Chas Peacock

We spoke with Chas to get his insights on building technology and internal processes for companies that are scaling quickly.

Jessica Srinivas
Nov 29, 2023 ⋅ 7 min read
Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 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 ?


  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