storyblok / storyblok-nuxt

Storyblok Nuxt module
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
MIT License
275 stars 42 forks source link

[DX] Improve the README.md #310

Open Baroshem opened 1 year ago

Baroshem commented 1 year ago

The README.md is far too long for the getting-started user. I understand that it is used as documentation as well but still it is solely missing the getting-started/quick-start section that usually requires users to:

  1. Install the module
  2. Register it (with some required configuration)
  3. Use it in the app.

For the Storyblok module for Nuxt the steps can be combined into:


Install @storyblok/nuxt:

npm install @storyblok/nuxt
# yarn add @storyblok/nuxt

Add following code to modules section of nuxt.config.js and replace the accessToken with API token from Storyblok space.

export default defineNuxtConfig({
  modules: ["@storyblok/nuxt"],
  storyblok: {
    accessToken: "<your-access-token>"
  }
});

The simplest way is by using the useAsyncStoryblok one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is vue, by default you get a content page named home):

<script setup>
  const story = await useAsyncStoryblok("vue");
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

Later on, we can have configuration, api options, etc. But it is crucial to have this getting started at the top so that the users can easily try it out. It should help having less questions and issues about really basic stuff such as this one :)

Baroshem commented 1 year ago

@alvarosabu