Prismic-vue
Prismic-vue es una librería para Vue.js que facilita la conexión con Prismic.io e interacción con algunos elementos que este nos provee, como lo son: Date, embed, image, keytext, link, richtext y title.
Instalación
npm install @pixela/prismic-vue
Uso
La librería posee los siguientes módulos:
- Conexión con la api
- CMS
- Componentes de Vue
- CmsDate
- CmsEmbed
- CmsImage
- CmsKeyText
- CmsLink
- CmsRichText
- CmsTitle
Ejemplo:
Importar un único módulo
import { CMS } from '@pixela/prismic-vue'; //Importa la modulo que facilita la conexión con Prismic
Importar varios módulos a la vez
import { CMS, CmsDate, CmsEmbed } from '@pixela/prismic-vue'; //Además de la conexión se importan los modulos de creación de componentes de Vue.js
Conexión con la api de Prismic.io
Importar la librería
import { CMS } from '@pixela/prismic-vue';
Funciones de la librería
Constructor
Para poder instanciar un objeto de esta clase se deberá pasar como parámetro el endpoint proveido por Prismic, este parámetro deberá de ser una cadena.
Ejemplo:
const cms = new CMS('https://my-site.prismic.io/api/v2');
setEndpoint
Ese método es utilizado para cambiar el endpoint que se está utilizando. El parámetro que recibe este método, al igual que el constructor, es una cadena.
Ejemplo:
cms.setEndpoint('https://my-new-site.prismic.io/api/v2');
getEndpoint
Este método retorna una cadena con el endpoint que se está utilizando.
Ejemplo:
cms.getEndpoint(); //https://my-new-site.prismic.io/api/v2
page
Page es un método que recibe dos parámetros page y params, el parámetro que siempre es utilizando es page, el cual es una cadena con el nombre de la página (Type en Prismic) del cual se desean obtener los datos.
Esto al ser una llamada asincrona deberá de ser ejecutada dentro de la función asyncData() de Vue.js Ejemplo:
cms.page('home').then(function(document) {
return { document } ; //document es quien contiene la información de la página.
});
Usualmente el contenido se encuentra en document.data y para acceder a un elemento especifico de una página de prismic es document.data['Nombre_elemento'], esto último se le puede pasar perfectamente a cada módulo que devuelve un componente de Vue
Componentes de Vue
Todos los modulos que nos permite la interacción con los elementos de Prismic devuelven un componente de Vue. En todos los casos se debe pasar la propiedad :content="elementoDePrismic". Más adelante se amplia la forma de mandar esta propiedad dependiendo de cual es el elemento de Prismic del cual deseamos obtener su componente de Vue.
Independientemente de cual sea el módulo que se desea usar, todos estos componentes luego de haberlos importado se deben registrar en la sección components de Vue. Por ejemplo:
components: {
CmsDate,
CmsEmbed
}
La forma de utilizarlos es de la siguiente manera:
<cms-date :content="my-date-content" :format="DD MM YYYY"></cms-date>
<cms-embed :content="my-embed-content"></cms-embed>
CmsDate
La propiedad :content que se debe pasar este componente debe de ser una cadena, usualmente esta cadena es proveída por Prismic. Este módulo tambien funciona para el elemento de TimeStamp de Prismic.
Opcionalmente se puede pasar la propiedad :format que también es una cadena, la cual nos permite pasar el formato de como es que queremos que las fechas y el tiempo sean devueltas. Los formatos soportados son los mismos que los de Moment.js
Este módulo devuelve un componente con la etiqueta span
Ejemplo:
<!-- document.data['date'] contiene 2018-01-26 -->
<cms-date :content="document.data['date']" :format="'DD MM YYYY'"></cms-date>
Devuelve
<span>26 01 2018</span>
CmsEmbed
Este módulo devuelve un elemento iframe. Tiene soporte para Youtube, Vimeo y Spotify. Este recibe tres propiedades:
- :content Se debe pasar un objeto, este objeto usualmente es proveido por Prismic. Esta propiedad es obligatoria.
- :options Son las propiedades extra que deseamos en el iframe que se nos devuelve. Por ejemplo width y height.
-
:spotify_options Son opciones que se usaran únicamente si el elemento embed que se ha pasado es uno de Spotify
- Ver la sección "Available parameters" de este enlace
Ejemplo:
<!-- document.data['embed'] contiene un objeto devuelto por Prismic de un elemento embed que hace referencia a Vimeo -->
<cms-embed :content="document.data['embed']" :options="{width: 480, height: 360}"></cms-embed>
Devuelve
<iframe height="360" src="https://player.vimeo.com/video/215499107" width="480"></iframe>