Getting started with Vue in Matomo
Getting started with Vue in Matomo
At the time of writing, developing with Vue is not so straight forward. The documentation online is very scarse. But I managed to dig out some of it and listed it here:
- Matomo getting started with Vue => Getting started with Vue
- Matomo JavaScript and CSS => Working with Piwiks UI
- Matomo Vue => Vue: In Depth
- Vue PoC => POC: Vue.js 3 migration path #17805
- Initial commit => [Vue] Introduce Vue + Workflow commands #17940
- Description on assets pipeline => [Vue] Documentation on the asset pipeline and how Vue/TypeScript are handled #541
Building
Matomo Core team has wrapped traditional Vue building scripts into PHP to run with the ./console build:vue
command.
The initial commit into Matomo can give you clues on how they adapted Vue. Which also provided somewhat documentation.
This post will describe my learnings and I will use some abstractions to simplify explanantions.
Ok, here’s some learnings:
(Yes, I just used the word learnings.)
Every new Vue component has an angularjs directive adapter that initializes it. This is done for backwards compatibility and as a formal layer for AngularJS to communicate with Vue.
This means that for every whatevah.vue
file you create, there needs to be a whatevah.adapter.ts
file, not always, but if you want full potential.
Directory pattern:
|
|
Setting up your environment
Description
Some steps for making your life easier as a frontender in Matomo.
Check out some of our Plugins using Vue
- No public plugins yet.
Vue folder structure:
|
|
Check Pre-requisites:
Find recommended node --version
in:
|
|
Here’s an easy way to get the correct Node version running
|
|
Run build
The basic way, inside docker:
|
|
If it’s nagging about browserlist, you could update the db. But it will nag after every rebuilt of your container.
Update npx:db
|
|
Webpack
Webpack version is a mystery. If you have it installed globally, it might interfer with your build, if you’re outside Docker.
Advanced way 🤓
The fun stuff:
Compiling assets outside of docker(faster, harder, SCOOOOOOTER!!! 🚀 🚀 🚀 )
For production files:
|
|
If you wanna keep Vue watch alive
Just add --watch
, like so:
|
|
For development files:
|
|