Home

Welcome to the contenta_vue_nuxt wiki!

Dev GUIDELINES

First make sure to Read the readme : https://github.com/contentacms/contenta_vue_nuxt#objectives-guidelines--what-are-we-doing-and-why--

• components pages are responsible to fetch all datas ( deserving to be indexed by Search Engines) from contenta public API
• Pages components fetch data via "services" located in "services" directory
• Fetched datas MUST flows down from pages components to components children (one way data flow )
• components children should events up if needed
• a store may be added if it is required by components communication and if events are not a good answer. But "pure" components and internal state is preferred when possible for unit testing (and reusability betweenpages) purposes
• Each component SHOULD have a corresponding unit test in "test" directory
• NOT OVER-ENGINEERING : we want to convince people that this is awesome to build Drupal Healdess site With Vue.js !

Page Components

Page components are special components located in "pages" directory. They are server side rendered automatically by Nuxt, making our application content crawlable by search engines. Pages should be a composition of children components, and should pass them data they need.

This is illustrated by this very simple example displaying a recipe page :

<template>
  <div class="container">
   <RecipeAsDetail :recipe="recipe" />
  </div>
</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>

Components

See "components" directory

view modes

I borrowed "view mode" concept from Drupal : component "recipeAsTeaser" display recipe as a teaser (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

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>

atomic

very small piece of design that is shared by a lot of places in the site, for example the "view more" button.