Home

Welcome to the contenta_vue_nuxt wiki!

Dev GUIDELINES

We focusing on creating "pure" components, easy to unit test : "props down, events up". store/index.js (a vuex store) is used when events or internal component state is not sufficient to solve an issue.

• Components pages are some containers only responsible to fetch all datas deserving to be indexed by Search Engines from contenta public API in asyncData(). They then pass all data as props to a child component.
• Pages components fetch data via "services" located in "services" directory
• Fetched datas MUST flows down from pages components to pure components children (one way data flow )
• Components children should events up to parent component if needed
• If component state and events are not enough, use the store from "store/index.js" for cross-components communication.
• Each component should have a corresponding unit test in "test" directory.

Page Components container example

Example of pages/recipes/_id.vue displaying a recipe page :

<template>
   <RecipeAsDetail :recipe="recipe" />
</template>

<script>
import Recipes from '~/services/Recipes'
import RecipeAsDetail from '~/components/RecipeAsDetail'
export default {
  components: { RecipeAsDetail },
  async asyncData ({ params }) {
    const recipe = await Recipes.findOneById(params.id)
    return { recipe }
  }
}
</script>

view modes

I borrowed for now "view mode" concept from Drupal : component "recipeAsTeaser" display recipe as a teaser with (title, image, description) and takes a recipe as an argument. "recipeAsDetail" display the full recipe detail. "recipesAsTeaser" is the same thing but for listing.

Bulma

Bulma css is a light css framework used for grids and helpers classes. It has zero JavaScript so it is very easy to use with Vue.js.

All components beginning with "Bulma" prefix are reusable components using bulma classes, to create a grid for example. Here is how to use bulma css ("Card")[http://bulma.io/documentation/components/card/]

    <BulmaCard>
      <div slot="image" v-if="node.image" class="thumbnail">
        <img v-if="node.image" :src="node.image.thumbnail.filename" />
      </div>
      <div slot="content">
        your custom card content
      </div>
    </BulmaCard>