[{"data":1,"prerenderedAt":122},["ShallowReactive",2],{"storyblok:blog\u002Ftime-for-storyblok-connecting-it-to-nuxt:version=published&resolve_relations=blog-entry.categories":3},{"stories":4,"story":5},[5],{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":113,"full_slug":114,"sort_by_date":34,"position":115,"tag_list":116,"is_startpage":41,"parent_id":117,"meta_data":34,"group_id":118,"first_published_at":119,"release_id":34,"lang":120,"path":34,"alternates":121,"default_full_slug":34,"translated_slugs":34},"Time for Storyblok - Connecting it to nuxt","2022-06-20T17:45:17.737Z","2022-07-08T19:38:30.999Z","2022-07-08T19:38:31.018Z",152916340,"9a0dd8a0-7ae2-43e4-96f9-e38fd3736326",{"_uid":13,"date":14,"content":15,"component":110,"categories":111},"eb5f98d1-3561-4530-8e51-6aef3b11602c","2022-05-28 11:42:55",[16],{"_uid":17,"text":18,"component":26},"94363234-3bab-4292-8715-8429214ed914",{"type":19,"content":20},"doc",[21,37,102,106],{"type":22,"content":23},"paragraph",[24,27,35],{"text":25,"type":26},"To pull content I will be using ","text",{"text":28,"type":26,"marks":29},"@storyblok\u002Fnuxt",[30],{"type":31,"attrs":32},"link",{"href":33,"title":34},"https:\u002F\u002Fgithub.com\u002Fstoryblok\u002Fstoryblok-nuxt",null,{"text":36,"type":26}," which is an official plugin for nuxt. The setup is easy enough:",{"type":38,"attrs":39,"content":42},"ordered_list",{"order":40,"tight":41},1,false,[43,50,63,69,82],{"type":44,"content":45},"list_item",[46],{"type":22,"content":47},[48],{"text":49,"type":26},"yarn add @storyblok\u002Fnuxt",{"type":44,"content":51},[52,56],{"type":22,"content":53},[54],{"text":55,"type":26},"Adding it to nuxt.config.ts",{"type":57,"attrs":58,"content":60},"code_block",{"params":59},"",[61],{"text":62,"type":26},"import { defineNuxtConfig } from \"nuxt\";\n\nexport default defineNuxtConfig({\n  buildModules: [\"@storyblok\u002Fnuxt\"],\n  storyblok: {\n    accessToken: \"\"\n  }\n});",{"type":44,"content":64},[65],{"type":22,"content":66},[67],{"text":68,"type":26},"Add components that correspond to Stories in storyblok.",{"type":44,"content":70},[71],{"type":22,"content":72},[73,75,80],{"text":74,"type":26},"For individual stories, I can use ",{"text":76,"type":26,"marks":77},"const story = await useStoryblok(\"{{story_slug}}\", { version: \"draft\" });",[78],{"type":79},"code",{"text":81,"type":26}," to pull the data.",{"type":44,"content":83},[84],{"type":22,"content":85},[86,88,92,94,100],{"text":87,"type":26},"For lists of stories (as far as I can tell), I need to use ",{"text":89,"type":26,"marks":90},"useStoryblokApi()",[91],{"type":79},{"text":93,"type":26}," to pull all the stories with \"starts_with\" as described in the ",{"text":95,"type":26,"marks":96},"API docs",[97],{"type":31,"attrs":98},{"href":99,"title":34},"https:\u002F\u002Fwww.storyblok.com\u002Fdocs\u002Fapi\u002Fcontent-delivery\u002Fv2#core-resources\u002Fstories\u002Fstories",{"text":101,"type":26},".",{"type":22,"content":103},[104],{"text":105,"type":26},"For the list of stories, I sadly cant use the built-in features at all. It doesn't allow me to input the slug into the component and other limitations. To combat this, I will use nr 5 to pull the data, but when I have received the stories i will map them as i did with the old cms.",{"type":22,"content":107},[108],{"text":109,"type":26},"I have now successfully pulled the first information from Storyblok.","blog-entry",[112],"36c5f0a3-3461-4b49-9758-537bdda01a2c","time-for-storyblok-connecting-it-to-nuxt","blog\u002Ftime-for-storyblok-connecting-it-to-nuxt",50,[],152811822,"e7a179d1-3768-4bf1-8e26-10a092f8f2b3","2022-05-28T11:42:55.000Z","default",[],1787062199535]