At the end of my last blog I'd converted switched from a "Content Distribution" approach to Components to using a single file component approach using vue-loader. I now had a simple Vue.js application that I could use to browse the "Company Home" on an Alfresco Repository. However although I could drill down into folders I was unable to come back out of them. To complete the basic navigation handling I decided to implement a breadcrumb component.
Fortunately the vue-loader documentation provided some useful information on setting up linting for .vue files using ESLint and the eslint-html-plugin. Installing these was pretty straight forward but getting Sublime to make use of them proved difficult because I was using NVM.
To cut a long story short it seems that when starting Sublime my bash profile wasn't including the paths set by NVM. I need to fully implement the solution provided here... but the simple workaround is just to launch Sublime from a new terminal.
I'm now in the process of tweaking my ESLint configuration in my project specific .eshintrc.js file and am slowly getting it to fit my preferences.
I plan to learn as much as I can about accessibility as I implement this client so did some research on accessible breadcrumbs and found this useful post (which despite being quite old still seems relevant). This means that whilst my breadcrumb trail is functional (and accessible) it looks very strange! I'm more interested in accessibility and function than style at the moment but will return to the visual look later.
The next step now that I have some basic functional components is to both focus on accessibility and figure out the best automated testing strategy.