Cómo actualizar VuePress a la versión 1.0

Recientemente fue lanzada la versión de VuePress 1.0, que incluye diferentes cambios a tener en cuenta al momento de actualizar nuestros sitios. En Styde ya hemos hablado anteriormente de VuePress, explicamos cómo realizar un deploy automatizado usando Travis CI y el sitio de la traducción de la documentación de Laravel funciona también en VuePress. A continuación hablaremos un poco sobre estos cambios que debemos realizar para que nuestro sitio funcione correctamente.

Ten en cuenta si usas Travis para desplegar tu sitio

Travis CI actualiza de forma automática las versiones de los paquetes que usamos e instala la versión más reciente. Al haber cambios importantes de versiones, puede que nuestro sitio con VuePress deje de mostrarse correctamente y se pierdan los estilos, por ello es recomendable indicar una versión específica del paquete en nuestro archivo .travis.yml:

install:
    - npm install -g [email protected]

Con @1.0.2 indicamos la versión del paquete a instalar. Si sale una versión nueva Travis CI la ignorará y mantendrá la que indicamos. Esto nos permitirá poder agregar los cambios necesarios a nuestro sitio al momento de actualizar.

Actualización de estilos

Anteriormente usabamos  .vuepress/override.styl y .vuepress/style.styl para personalizar los estilos de nuestro sitio:

• En override.styl indicábamos los colores personalizados.
• En style.styl el CSS personalizado que queríamos agregar.

Ahora, con la nueva versión de VuePress, debemos crear un nuevo directorio dentro .vuepress llamado styles y dentro reemplazar los archivos anteriores con los siguientes:

• El archivo styles/palette.styl reemplaza a override.styl.
• El archivo styles/index.styl reemplaza a style.styl.

Importar componentes

Los componentes ahora se encuentran dentro del directorio components y debemos especificar esto al momento de importarlo dentro de nuestros archivos Markdown:

// Antes
import NavLink from "@theme/NavLink.vue";

// Ahora
import NavLink from "@theme/components/NavLink.vue";

Herencia de temas

VuePress 1.0 nos permite heredar desde el tema principal y construir uno nuevo en base a ese. Simplemente debemos crear un archivo .vuepress/theme/index.js y dentro extender del tema principal de VuePress:

module.exports = {
  extends: "@vuepress/default-theme"
};

Nuevos plugins

En VuePress 1.0 ahora tenemos una serie de plugins que podemos utilizar en nuestros sitios, entre ellos Google Analytics y Service Workers.

Plugin de Google Analytics

Anteriormente Google Analytics podía ser configurado en el archivo config.js de nuestro sitio definiendo los valores necesarios en la opción ga. Ahora simplemente podemos instalar el plugin de Google Analytics y todo será configurado por nostros de forma automática:

npm install @vuepress/plugin-google-analytics

Service Worker

El plugin Service Worker permite que los usuarios accedan a nuestro sitio de forma offline luego de haberlo visitado por lo menos una vez. Podemos instalarlo usando:

npm install @vuepress/plugin-pwa

Luego en el archivo config.js agregamos lo siguiente:

plugins: ['@vuepress/pwa']

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Publicado por: David Palacios

Neuroscience nerd. No me gusta el small talk ni el ruido. Me gusta JavaScript y Vue. Tratando de aprender más cada día.

Travis CI vuepress