Als frontend developers hebben we tal van frameworks tot onze beschikking om ons werk goed te doen. Zo’n framework geeft ons een basis, gestandaardiseerde code in bestanden en folders. Het is als het ware een basis waarop we kunnen bouwen, terwijl we wel alle flexibiliteit behouden om jouw custom gemaakte design volledig te realiseren. Zo’n framework is dus een kader die het ons makkelijker maakt om de elementen in jouw website goed te ordenen. Een van onze favoriete frameworks, ook voor al bestaande websites, is Vue.js.
Wat is Vue.js?
Vue.js is een open-source Javascript framework dat een mooie basis biedt voor elke moderne webapplicatie of website. Het biedt webcomponenten, databinding, routing, state management en communicatie met het backend via HTTP. Maar daar is Vue.js niet de enige in - je het bijvoorbeeld ook React en Angular die een soortgelijk open-source framework bieden. Het voordeel van Vue is te vinden in eenvoudigheid en structuur. Voor ons als developers is Vue eenvoudig om in te werken en zeer flexibel om jouw webapplicatie in op te bouwen - waardoor we nog sneller onze development kunnen realiseren.
Een Vue project starten
Vue is een reactief framework. Dit betekent dat we programmeren rondom “data streams”: wanneer de data verandert, wordt onze template automatisch opnieuw ingeladen en weergeven. Hoe dat er in de praktijk uitziet? Check deze video:
Met zo’n reactief framework als Vue.js of NuxtJS kun je heel goed eenvoudige en complexe websites compleet vanaf scratch bouwen, maar het leent zich ook prima voor een kleinere toepassing te bouwen als los onderdeel binnen een bestaande site.
Of je nou een complete website wil bouwen of een een onderdeel aan een bestaande site wil toevoegen, dit is hoe je start. We volgen het voorbeeld van Vue CLI, en maken een nieuw project aan middels vue-create hello-world (hello-world kun je natuurlijk aanpassen naar eigen voorkeur). Als het goed is hebben we nu de volgende mappenstructuur.
Als we binnen hello-world het commando npm run serve runnen zien we de standaard Vue output. Hierin kunnen we gaan werken.
Vue binnen een bestaande omgeving
Het komt wel eens voor dat wij, als frontend developers, de opdracht krijgen om een bepaalde javascript module te bouwen binnen een bestaande omgeving. Echter is die omgeving lang niet altijd ideaal. Bijvoorbeeld omdat er überhaupt nog geen javascript framework aanwezig is, of omdat de bestaande omgeving zeer specifieke scripting heeft waar je je liever niet aan wilt branden. Vue.js biedt dan mooie oplossingen om een standalone module in zo’n bestaande omgeving te deployen.
Er zijn meerdere manieren om Vue te implementeren binnen een bestaand project. Hieronder ga ik de diepte in hoe je met de standaard Vue mappenstructuur (die we hierboven zagen) kunt blijven werken, dus met components, mixins etc.
Geen interesse in de code, maar wel in de oplossing?
Neem contact met me op en kijk wat Vue voor jouw bestaande of nieuwe website kan betekenen!
⇾ Mail Koen
Wel geïnteresseerd in het implementeren van Vue in een bestaand project? Lees dan vooral door! We gaan ons uiteindelijk focussen op de distributie map, niet op het inline schrijven van VueJS code.
De implementatie: het stappenplan
Je hebt dus een Vue project gestart. De volgende stap is om de inhoud binnen een bestaand project te implementeren. Hiervoor hebben we vlug een pagina opgezet:
We willen de Vue applicatie ergens tussen de paragrafen plaatsen. Om dit te realiseren gaan we eerst even spieken binnen de hello-world distributie folder (in de index.html), om te kijken hoe Vue dit zelf regelt.
We zien <div id=”app”></div>, dit is de plek waar Vue de applicatie in weergeeft. Dit gaan we als uitgangspunt gebruiken binnen onze eigen applicatie. Dus we zetten ook zo’n zelfde div in onze index.html. Dit is echter nog niet voldoende, we moeten ook de css en javascript bestanden erbij zetten. Deze zitten in de dist folder van hello-world:
Zoals je ziet plaatst webpack automatisch een cache-busting suffix achter de filename (bijv. fb0c6e1c bij de css). Dit is om ervoor te zorgen dat er altijd de laatste versie van de applicatie wordt geladen. Als we deze suffix exact overnemen kunnen we al een gedeelte van de applicatie binnen ons bestaand project tonen.
Zoals we zien kan de afbeelding van het Vue logo niet geladen worden, dit komt omdat het pad niet klopt. Deze staat nog relatief ingesteld en ‘kijkt’ nog vanuit de distributie folder. Dit zullen we moeten aanpassen in de configuratie van Vue. Hiervoor maken we binnen de hello-world folder een bestand vue.config.js aan. In dit bestand zetten we het volgende:
module.exports = {
publicPath: 'hello-world/dist/',
}
Dit zorgt ervoor dat de paden eerst een mapje hoger kijken, dus vanuit de hello world map. Nu moeten we in het bestaande project in index.html de bestandsnamen van de css en javascript bestanden weer aanpassen omdat de cache busting suffix na elke build veranderd. Dit gaan we zometeen nog aanpassen.
Als het goed is, werkt het totaalpakket nu, alleen moeten we nog na elke build de cache-busting suffix overnemen in onze index.html. Dat is niet erg handig. Dit kunnen we ook aanpassen in de vue.config.js. Nadat we de vue.config hebben aangepast niet vergeten om npm run build te draaien.
module.exports = {
publicPath: 'hello-world/dist/',
chainWebpack: config => {
if(config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css')
extractCSSPlugin && extractCSSPlugin.tap(() => [{
filename: '[name].css',
chunkFilename: '[name].css'
}])
}
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
}
}
Na de nieuwe build komen de css en js bestanden in de root van de distributie terecht, zonder cache-busting suffix. Dit maakt het eenvoudiger om te includen binnen onze index.html.
Aansluitend zullen we het pad van de css en js includes dus nog moeten veranderen in onze index.html:
Meer weten over Vue.js?
Als frontend developer vind ik Vue een prachtig framework. Wil je eens sparren over de mogelijkheden van Vue, binnen een bestaande of nieuwe applicatie of website? Daar ben ik zeker voor in! Maak vrijblijvend een afspraak voor een kop koffie en ik kijk graag met jouw project mee.