Een website maken met Nuxt.js en WordPress REST API

Bijwerken:
Je kunt nu mijn boilerplate van de openbare repo gebruiken:
https://github.com/bovas85/nuxt-headless
(geef een ster if als je het op prijs stelt, voel je vrij om bij te dragen).

Vaak bevinden we ons in de positie waarin onze klanten een Content Management Systeem (CMS en later) willen waarmee ze hun pagina's kunnen bewerken zonder HTML-code te hoeven kennen.

Het is dan meestal een keuze tussen een op maat gemaakt CMS en WordPress (sinds kort zien we steeds meer "Headless" CMS opkomen, evenals het zeer geldige alternatief voor markdown of statische CMS-opties).

In ons geval hebben we om een ​​paar redenen gekozen voor WordPress:
- Het is een solide CMS met jarenlange ervaring op het veld
- Beveiligingsproblemen zijn nu bijna verdwenen, gezien de automatische beveiligingsupdates vanaf versie 4.7 (ik kan me vergissen in de versie, citeer me daarover niet).
- WordPress REST API geeft ons toegang tot verschillende velden (en aangepaste velden) zonder dat we de hele front-end met WordPress hoeven te bedienen.

Onze Backend Developer was ook meer bekend met PHP, Laravel en WordPress dan andere technologieën, dus gelukkig hebben we uiteindelijk voor WordPress gekozen.

Wat betreft de Frontend, had ik de leiding over het kiezen van de stapel en omdat ik zo dol ben op Vue.js (Vue 2), heb ik dat zeker naar voren geschoven, met Nuxt.js voor Server Side Rendering (SSR vanaf nu).

Deel 1, Wat is Nuxt.js?

Nuxt.js PRO's:
1) automatisch gegenereerde routing met middlewares, validators en meer
2) volledige SSR-ondersteuning uit de doos met vuex-ondersteuning
3) pagina's systeem met async data hooks, overgangen, laadindicator etc.
4) lay-outsysteem uit de doos
5) verwerking van metagegevens direct uit de doos met SSR-ondersteuning
6) alle chique nuxt-modules met dingen zoals PWA, authenticatie, offline ondersteuning en meer
7) Conventie over configuratiebenadering waaraan ik de voorkeur geef
8) Een gemeenschap van Vue-ontwikkelaars die allemaal met dezelfde eigenzinnige aanpak werken.
Punt 8 is vooral enorm omdat de Vue-gemeenschap extreem verdeeld is, omdat Vue een progressief kader is.
Mensen gebruiken Vue op zoveel verschillende manieren dat het geweldig is om een ​​groot deel van de Vue-gemeenschap te hebben die Vue daadwerkelijk op dezelfde manier gebruikt.
Dat is exclusief SSR ...

- @ gustojs # 2934 van VueLand Discord-kanaal

Zoals u ziet, zijn deze functies een enorm voordeel voor een klein bureau dat niet te veel tijd kan besteden aan het ontwerpen van een enterprise-architectuur voor hun stack.
WordPress heeft onlangs de REST-API in het kernpakket (4.6.0) gebundeld en dus besloot ik het voor onze eerste website te proberen.

Het was een migratie van een AngularJS frontend ...

Deel 2, Eerste installatie

Het eerste vereiste punt was dat de websites zo SEO-vriendelijk mogelijk moesten zijn, afkomstig van Angular 1 / 1.5 waar de enige gemakkelijke oplossing prerender.io was (die niet werd geïmplementeerd).

Ik had Nuxt eerder geprobeerd voor een nevenproject, maar dingen klikken nooit tenzij je er hard aan werkt.

Ik kende VueJS, maar de eerste installatie voor Nuxt liet me een beetje twijfelachtig over de mogelijkheden. Het leek te simpel om waar te zijn, en zonder enige configuratie van de initiële CLI.

Je kunt beginnen met het installeren van de vue cli als je dit nog niet hebt gedaan:

npm installeer -g vue-cli

(pas op voor vue-cli 3 die binnenkort uitkomt, want dit kan dit volgende commando veranderen)

Vervolgens kunt u met behulp van vue-cli een nieuw Nuxt-project starten door te typen:

vue init nuxt-community / startersjabloon 

Waarbij uw map en projectnaam is.
U steunt een map met verschillende andere en een nuxt.config.js-bestand:

eerste nuxt.config.js-bestand voor mijn vue-meetup-gesprek

Het eerste dat u moet begrijpen over Nuxt is dat het een probleemloos framework is rond VueJS en SSR.

Het gebruikt alleen modules en bibliotheken die al beschikbaar zijn in VueJS, maar organiseert ze in een heel nette, eigenzinnige mapstructuur.

mapstructuur voor een nuxt-project

Deel 3, Going Deeper

Het grootste probleem in eerste instantie was hoe om sass en variabelen gebruik sass integreren in mijn project.
Ik moest dit tovenarij doen hier om variabelen die beschikbaar zijn in elke Single File Component (SFC) of pagina te bekijken

Dit werd vervolgens veel gemakkelijker dankzij een Nuxt-module die eenvoudig aan nuxt.config kan worden toegevoegd in een array met een lijst met sass-variabelen die wereldwijd kunnen worden geladen.

De volgende stap is uitzoeken hoe de staat te beheren.

Om de een of andere reden vond ik een wereldwijde mixin een goed idee

De realiteit is dat wanneer je een paar componenten hebt, misschien een navigatiebalk of sommige modals, het al tijd is om Vuex te laden.

Om dat te doen in Nuxt is zo eenvoudig:

index.js in de map / store met enkele voorbeeldmutaties en nuxtServerInit

Nuxt biedt ook een manier om elke betekenisvolle status vooraf te laden met behulp van NuxtServerInit-actie in de winkel.
Hiermee kunt u alles vooraf ophalen zonder dat u hoeft te mounten om het te laden (en op die manier op SSR te verliezen).

Er zijn andere methoden die buiten de winkel kunnen worden gebruikt, namelijk asyncData (die gegevens in de component laadt) en fetch (die mutaties doorvoert of acties verzendt).

Deze kunnen worden gebruikt als u iets alleen lokaal nodig hebt binnen een component of pagina.

asyncData retourneert een nieuwe gegevenseigenschap op de lokale .vue-paginakunnen we nieuwe gegevens plegen van een API naar de winkel met ophalen

Een ding om te realiseren is dat we te maken hebben met twee instanties.
Eén op de server, virtueel en niet zichtbaar, en één aan de client-kant.

Dit betekent dat er enkele gotcha's zijn bij het ontwikkelen met Nuxt en elke server-side app, maar Nuxt maakt deze gotcha's zeer beperkt en eenvoudig te overwinnen.

Nuxt heeft een -component gebundeld, die iets anders, inclusief andere componenten, kan omwikkelen, zolang er maar één root-element in zit.

no-ssr loopt de bijgevoegde code enige client-zijde (geen SSR)

Met deze plug-in kan wat erin zit alleen aan de client-kant leven, en is met name handig bij het omgaan met plug-ins van derden die mogelijk verwijzingen naar venster- of DOM-elementen bevatten en die niet nodig zijn aan de serverkant.

Als u dit niet of iets anders ik zal nu laten zien doen, zou u een andere boomstructuur, die Nuxt gewaarschuwd te worden als tegenkomen:

De andere gotcha is hoe bibliotheken en componenten in Nuxt worden geladen.
We laden ze door plug-ins te maken in de map met plug-ins en deze te koppelen met behulp van ofwel Vue.use, Vue.component of Vue.directive.

De tweede stap hier is om die plug-in toe te voegen aan nuxt.config, en hier kunnen we specificeren of dat een plug-in is die klaar is voor ssr (alleen door het pad naar de plug-in te typen), of niet, door ssr op te geven: false daar.

Deel 4: omgaan met WordPress CMS- en API-aanroepen

Zodra het hoofdproject is ingesteld en u elke pagina begint te behandelen, is de snelste en beste aanpak naar mijn mening het toevoegen van een plug-in met de naam:
Geavanceerde aangepaste velden (ACF)
naar WordPress backend.

Dit voegt aangepaste veld functionaliteit toe aan pagina's en berichten in WordPress.
Om dit uit te breiden tot de REST API vindt u ook een plugin genaamd nodig
ACF naar REST API

Enkele nuttige addons:
WP REST API filtervelden
filter velden Hiermee kunt u de velden geretourneerd door de api te filteren.

WP REST API Pure Taxonomies
Deze plug-in bevat alle beschikbare taxonomie-attributen in de WordPress REST API (v2) zonder aanvullende API-aanvragen.

WP REST API Cache
Schakel caching in voor WordPress REST API en verhoog de snelheid van uw applicatie. (Ik raad het gebruik van deze plug-in niet aan)
Waarschuwing hier:
Als u postverzoeken doet (bijvoorbeeld contact-formulier-7 plug-in), zorg er dan voor dat u deze plug-in niet gebruikt, of filter de string 'contact-formulieren' in functies.php zoals hieronder:

add_filter ('rest_cache_skip', functie ($ skip, $ request_uri) {
  if (! $ skip && false! == stripos ($ request_uri, 'contact-form-7')) {
    waar terugkomen;
  }
  retourneer $ skip;
}, 10, 2);

WP REST API-menu's
Breidt WP API uit met WordPress-menuroutes.

De volgende stap was vervolgens het configureren van de API-eindpunten.
Ik heb persoonlijk een config.js-bestand gebruikt dat ik zo kan importeren:

Config importeren uit ‘~ / assets / config’;

Hierdoor kan ik een duidelijke en geconfigureerde eindpuntlocatie hebben voor al mijn pagina's.

Het bovenstaande is gedeeltelijk overgenomen van een luxe reisorganisator, Antilophia.
De site is nog niet live, maar ik zal hier updaten zodra het is. Blijf kijken ;)

Zodra u de bovenstaande configuratie hebt, kunt u de app configureren om gegevens op te halen op nuxtServerInit of met fetch / asyncData.

Hiermee kun je vervolgens elk gedeelte van de website vullen met behulp van de geavanceerde aangepaste velden plus de rest van de beschikbare WordPress API-velden (eigenlijk alles).

De server zal de inhoud bijwerken telkens wanneer een sessie voor een gebruiker wordt geladen.

U kunt dynamische pagina's maken met de mapstructuur:
Waarbij de naam is van de gewenste parameter (bijvoorbeeld: bestemming)

Dit geeft u toegang tot de parameter met behulp van:

dit. $ route.params. 

/Pages/:mexico/index.vue zou bijvoorbeeld terugkeren

dit. $ route.params.destination === ‘mexico’

Onthoud in asyncData of ophalen, je hebt geen toegang tot ‘dit’ zoals het draait voordat de pagina wordt gemount, maar je hebt toegang tot de ‘context’.

async fetch ({app, store, params}) {
  // hiermee krijgt u toegang tot het routeren van params met de steno-params
  // maar ook naar de winkel en de andere app-waarden
  // controleer alle velden op https://nuxtjs.org/api/context/
}

Als u veel API-aanroepen heeft, kan ik twee opties voorstellen:
- Gebruik een WP REST API Cache-plug-in zoals WP REST API Cache
- Cache nuxtServerInit-oproepen (voorkeur)

Voor dat laatste is het een beetje lastig en moet je lre-cache-mechanismen en axios-extensies-pakket gebruiken.
Een samenvatting met alle bestanden is hieronder gelinkt.

Link: https://gist.github.com/bovas85/8b5610ac94dd036628f53f702b300a64

vuex winkelvoeg deze extensie toe aan axios en voeg de axios.js plugin toe aan nuxt.config.js

Dit is met name handig als u een statische site genereert (nuxt genereren), omdat nuxtServerInit eenmaal per pagina wordt gegenereerd (stel u voor dat u 20 dynamische pagina's hebt, dan zal het 20 * aantal api-oproepen uitvoeren).

Deel 5: Hoe zit het met de implementatie van de app?

We hebben hiermee twee routes geprobeerd.
1) We gebruikten een nuxt gegenereerde statische site geserveerd met een reguliere server (old school manier). Snel maar het nadeel is dat als je veel dynamische pagina's hebt, het weergeven van de dynamische routes een beetje lastig en traag is (kijk hier hoe je dat kunt doen);
2) We hebben een door nodeJS gehoste service zoals Now gebruikt (er zijn er meerdere, of gebruiken gewoon uw hosting als deze NodeJS ondersteunt, onze niet).

Ik schreef een artikel over een bepaalde gotcha bij het migreren van een domein naar Now van GoDaddy, je kunt het hier lezen:

“Uw SSR-app implementeren in Zeit Now van GoDaddy” @MoustacheDsign https://medium.com/@moustachedesign/deploying-your-ssr-app-to-zeit-now-from-godaddy-41b51302375f

Met nu, na het installeren van de cli, typt u nu gewoon en het zal uw SSR-site in seconden implementeren (letterlijk, afhankelijk van uw verbinding en hoe groot de site is;))

Het resultaat is een zeer kleine, geoptimaliseerde en async-bundel. Er is automatisch het splitsen van brokken voor pagina's uit de doos, dus u hoeft zich geen zorgen meer te maken over die lastige brokken.

niet slecht

Deel 6: Wat is de volgende stap voor Vue en Nuxt?

Vue en Nuxt zijn geen nieuwkomers meer, er is een groot ecosysteem van plug-ins, modules en bibliotheken die beschikbaar zijn en steeds groter worden.

Sommige van die die ik heb gebruikt, zijn plug-ins voor schuifregelaars, carrousels, lui laden van afbeeldingen, en meestal kunnen ze worden opgenomen, zelfs als ze niet eigen zijn aan Nuxt of zelfs Vuejs.

Nuxt.js is een OpenCollective en wordt zelf gefinancierd.
Als je hiervan houdt zoals ik, overweeg dan om te doneren op https://opencollective.com/nuxtjs

Stuur problemen voor Nuxt hier (het integreert met Github-problemen, heel netjes!):
https://nuxtjs.cmty.io

Het zit erop

Heb je nog vragen?
Als dat zo is, kun je hieronder reageren of me tweeten @moustacheDsign

Sommige sites die ik heb gemaakt volgens deze aanpak:

Als je vragen hebt, beantwoord deze dan of tweet me @moustacheDsign

Bedankt van de kat