Nella ricerca di un servizio per la gestione di contenuti statici per un progetto e-commerce headless che stiamo realizzando, la scelta è ricaduta su 

 dopo aver fatto un paio di valutazioni tra questo strumento e Contentful.

Prismic è piuttosto leggero e veloce da configurare e, nel nostro caso, lo utilizziamo per sostituire la parte CMS di Magento, ma è ottimale anche per un sito personale o corporate oppure un blog, anche perché mette a disposizione un appetibile piano free per questi casi.

Metteremo in piedi in questo post una piccola demo di un sito corporate con Nuxt.js e Prismic.io per mostrare le principali caratteristiche di questo strumento.

 è ormai sulla bocca di tutti nella community di Vue.js e non solo perché ha saputo affermarsi negli ultimi anni come framework Vue solido e funzionale, ma anche per la sua modularità e versatilità, tanto che molte aziende medio-grandi lo stanno ora scegliendo come soluzione headless per il frontend.

Per la nostra demo, realizzeremo un sito multi lingua con una pagina "speciale" per l'homepage e una serie di pagine ripetibili per la sezione blog.

Partiamo pertanto dal comodissimo wizard d'installazione che Nuxt ci mette a disposizione:

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in corporate-site
? Project name corporate-site
? Project description My terrific Nuxt.js project
? Author name Lorena Ramonda
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier, Lint staged files
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code), Semantic Pull Requests

Siccome, per questo progetto, non andremo a fare altre chiamate API oltre quelle di Prismic, saltiamo l'installazione di Axios poiché, come vedremo, il modulo nuxt-prismic ci mette a disposizione già tutto l'occorente, ma in altri casi, come l'e-commerce menzionato all'inizio del post, è invece molto probabile che si vada ad utilizzare anche Axios o moduli alternativi.

Aggiungiamo giusto una pennellata di stile (che andremo a copiare pedrestremente da questo sito):

export default {
  ...
  css: ['@/assets/scss/screen.scss'],
  ...
}

Installiamo anche il modulo i18n per la gestione multi lingua del sito. Per questo esiste il modulo 

/*
  ** Nuxt.js modules
  */
modules: [
  ...
  // Doc: https://nuxt-community.github.io/nuxt-i18n/
  'nuxt-i18n'
],
/**
 * I18n module configuration
 * See https://nuxt-community.github.io/nuxt-i18n/options-reference.html
 */
i18n: {
  locales: [
    {
      name: 'Italiano',
      code: 'it',
      iso: 'it-IT',
      file: 'it.js'
    },
    {
      name: 'English',
      code: 'en',
      iso: 'en-GB',
      file: 'en.js'
    }
  ],
  lazy: true,
  langDir: 'langs/',
  defaultLocale: 'it'
},

Come si evince dalla configurazione andremo a creare un file per lingua all'interno di langs con tutte le traduzioni statiche del sito, per esempio quelle del footer:

export default {
  corporate: {
    vat: 'p. iva',
    share_capital: 'cap. soc.'
  }
}

export default {
  corporate: {
    vat: 'vat id',
    share_capital: 'share capital'
  }
}

<template>
  <footer id="footer" role="contentinfo">
    <div class="container">
      <v-socials />
      Bitbull Srl - {{ $t('corporate.vat') }} 03526400043 - {{ $t('corporate.share_capital') }}
      <v-lang-switcher />
    </div>
  </footer>
</template>

Predisponiamo anche uno switcher per fare il cambio lingua:

<template>
  <ul class="lang">
    <li v-for="locale in $i18n.locales" :key="locale.code" class="lang__item">
      <span v-if="$i18n.locale === locale.code">{{ locale.code }}</span>
      <n-link v-else :to="switchLocalePath(locale.code)" :title="locale.name" exact>
        {{ locale.code }}
      </n-link>
    </li>
  </ul>
</template>

Se tutto funziona, siamo pronti a partire!

PS: Alcuni passaggi nella creazione dei componenti sono stati saltati ma potete trovare tutto qui: 

Mettiamo un attimo da parte Nuxt e passiamo ora all'argomento padre di questo post.

Di che cosa avremo bisogno per questo sito?

Innanzitutto, di tre pagine: la homepage (già presente), una pagina blog che elencherà i post, e una pagina dinamica per il singolo post.

Andiamo quindi a creare le altre due pagine mancanti in 

 e creiamo un account. Una volta loggati ci verrà chiesto di creare un repository. Questo è quello che ospiterà i nostri dati e che ci permette di ottenere il nostro endpoint per le chiamate API. Il nome del repository deve essere univoco in modo assoluto (non è circoscritto al proprio account). Ci verrà anche chiesto di scegliere un piano, partiamo dal free.

Una volta creato lo selezioniamo e ci troveremo nella nostra dashboard del progetto.

Per prima cosa ci verrà chiesto di creare un custom type. Il custom type serve ad identificare i tipi di pagina/contenuto che il nostro sito tratterà. Possono essere di due tipi: ripetibili (repeteable) o unici (single).

Partiamo dal single type e dall'homepage. Come sappiamo l'homepage è una pagina speciale che non viene mai ripetuta su un sito poiché di solito è caratterizzata da una struttura e da uno stile ad hoc. Per cui è la candidata perfetta per il primo custom type di tipo single di Prismic.

Come possiamo vedere, la nostra homepage è composta da un blocco iniziale con un titolo e una descrizione più un blocco sottostante che contiene due blocchi simili quindi potenzialmente ripetibili.

Prismic mette a disposizione tutta una serie di tipi di campi, tra cui titolo, rich text, link etc..

Per questo primo blocco di testo potremmo ipotizzare di utilizzare sia un campo titolo + un campo di rich text oppure anche soltanto un campo di rich text dando la possibilità di utilizzare più tag (che andremo comunque a definire noi). Opterò per quest'ultima opzione per permettere più duttilità nella formulazione del testo e nell'ordine degli elementi, ma nulla vieta di vincolare il tutto ad un ordine prestabilito e tag ridotti.

Salviamo e andiamo a creare subito la nostra homepage aggiungendo i dati che possiamo comodamente 

Compiliamo pertanto il primo campo, salviamo e pubblichiamo (il salvataggio da solo non renderà pubblici i dati nelle API, ma creerà semplicemente una bozza su Prismic). La barra in alto da gialla diventerà verde e ora siamo online!

Intanto, assicuriamoci che tutto sia andato a buon fine. Se copiamo il proprio personale endpoint e a questo aggiungiamo 

https://<YOUR-REPO-NAME>.prismic.io/api/v2

ci ritroveremo in una dashboard che permette di interrogare il nostro endpoint.

Da qui possiamo fare un semplice "Search documents" e ritrovarci con tutta la lista dei documenti già creati, oppure interrogarli puntuali tramite la query utilizzando i 

Cliccando in alto il tasto "json" e poi "Search documents" otterremo così un json con i dati, verifichiamo che quanto abbiamo appena inserito sia presente.

C'è ;) quindi possiamo riprendere il nostro progetto in Nuxt ed integrare questi dati all'interno del nostro sito.

I creatori di Nuxt hanno già pensato a noi e creato un 

 che wrappa quello originale e ci facilita le cose.

/*
  ** Nuxt.js modules
  */
modules: [
  ...
  // Doc: https://prismic-nuxt.js.org/docs/getting-started
  '@nuxtjs/prismic'
],

/**
  * Prismic module configuration
  */
prismic: {
  endpoint: 'https://YOURENDPOINT.prismic.io/api/v2',
  linkResolver: '~/prismic/link-resolver.js'
},

 del modulo occorre creare anche un file link-resolver.js con questo contenuto:

export default function (doc) {
  return '/'
}

<small>Per maggiori informazioni sul link resolver fare riferimento alla 

 messi a disposizione da Prismic per il parsing di alcuni dei suoi campi che certamente andremo ad usare.

Apriamo ora la nostra home page e facciamo la prima chiamata!

async asyncData({ $prismic, error, app }) {
  const doc = await $prismic.api.getSingle('homepage')

  if (doc) {
    return {
      page: doc.data || doc
    }
  } else {
    error({ statusCode: 404, message: 'Page not found' })
  }
},

Per interrogare il nostro repository, facciamo sempre riferimento alla 

. Ci sono svariati tipi di query possibili (Query Single Type, by ID & UID, All Documents, by Type, by Tag, by Date, by a Field). Nel caso dell'homepage ci serve 

Ovviamente, dato che stiamo usando il modulo di Nuxt e non le API dirette di Prismic dobbiamo sì far riferimento alla guida di Prismic ma altresì a quella di 

 per sapere cosa ci mette a disposizione. Come si legge nella doc, tutti i metodi che ci servono sono all'interno di 

 ed ecco che quindi per recuperare i dati dell'homepage possiamo scrivere:

che è un helper che di fatto esegue una query più lunga (che si potrebbe tranquillamente usare al posto):

await $prismic.api.query(Prismic.Predicates.at('document.type', 'homepage'))

Facciamo poi un controllo sul risultato di questa chiamata scatenando una pagina di errore nel caso in cui non si ricevesse nessun dato.

In caso positivo, invece, ci troveremo all'interno della proprietà 

 in data i dati della nostra pagina che possiamo andare a renderizzare tramite uno dei componenti messi a disposizione da Prismic e menzionati prima, 

Questo renderizzerà correttamente il tag 

 che abbiamo utilizzato nel documento senza ulteriore parsing da parte nostra.

Ci ricordiamo che abbiamo deciso di fare un sito multi lingua? Ebbene Prismic gestisce anche la possibilità di tradurre i contenuti in qualsiasi lingua previa pochissima configurazione. Vediamo come.

Ritorniamo in Prismic e clicchiamo in basso a sinistra su "Settings" da qui sul menu laterale "Translations & locales".

In questa schermata selezioniamo la lingua desiderata e aggiungiamola.

Adesso tornando nella tab dei contenuti vedremo una tendina in più, quella della lingua, e selezionado la lingua appena aggiunta ecco che la nostra homepage vince un badge "to translate" per questa lingua. A questo punto cliccando sull'homepage e aggiungendo i contenuti in lingua avremo la nostra pagina tradotta.

Manca però un controllo nella nostra chiamata a frontend. Torniamo quindi su Nuxt e implementiamolo.

 occorre passare alla query un oggetto con il codice iso della lingua in lettere minuscole, ed esempio: 

Li andremo pertanto a recuperare dalla nostra configurazione Nuxt che ricordiamo essere:

i18n: {
  locales: [
    {
      name: 'Italiano',
      code: 'it',
      iso: 'it-IT',
      file: 'it.js'
    },
    {
      name: 'English',
      code: 'en',
      iso: 'en-GB',
      file: 'en.js'
    }
  ],
}

 per recuperare l'oggetto della lingua corrente:

app.i18n.locales.filter((lang) => lang.code === app.i18n.locale)[0]

e poi passare l'oggetto con la lingua del solo codice ISO in lowercase:

{
  lang: currentLocale.iso.toLowerCase()
}

async asyncData({ $prismic, error, app }) {
  const currentLocale = app.i18n.locales.filter((lang) => lang.code === app.i18n.locale)[0]
  const doc = await $prismic.api.getSingle('homepage', {
    lang: currentLocale.iso.toLowerCase()
  })

  ...
},

Bitbull

Headless

Gestire contenuti statici con Prismic.io e Nuxt.js