Posts about Vue.js

Configuring Storybook for Vue with TypeScript

August 14th 2020 Vue.js TypeScript

Storybook is a great tool for component development. But although it supports many frameworks, it still sometimes gives the appearance of being React-first. For example, the default configuration for Vue.js doesn't have TypeScript support.

Using InversifyJS in NuxtJS

Unlike Angular, Vue.js doesn't have a built-in dependency injection framework and neither has NuxtJS. There's a way to inject members into components with Vue.js and NuxtJS plugins but that's just a small subset of what a real dependency injection framework can do. Of course, nothing is stopping you from using one in your Vue.js or NuxtJS application. InversifyJS is a popular choice in the JavaScript ecosystem.

Testing JSX components with Jest in NuxtJS

July 17th 2020 Jest NuxtJS Vue.js TypeScript

Even if you select TypeScript and Jest support when creating a new NuxtJS project, it still isn't fully configured for writing tests in TypeScript, let alone for testing components written with JSX syntax. This post describes my journey to a working configuration.

Class Components with JSX in NuxtJS

July 10th 2020 NuxtJS Vue.js TypeScript

Although both Vue.js and NuxtJS have TypeScript support, it often seems incomplete. For example, there's no compile-time type checking in Vue.js templates. Any errors will only be reported at runtime. Currently, the only way to achieve compile-time type safety is to use render functions with JSX syntax instead.

Vuex Modules in Multiple Files in NuxtJS

July 3rd 2020 NuxtJS Vuex Vue.js

One of the options for creating a Vuex module in NuxtJS is to create separate state.ts, getters.ts, mutations.ts, and actions.ts files in the module folder. Especially for large modules, this can make the code easier to navigate. However, a very important detail about this approach is mentioned very briefly in the documentation.

Hooking into Vue Router from NuxtJS

June 26th 2020 NuxtJS Vue.js

The NuxtJS application framework for Vue.js replaces a lot of the low-level configuration through conventions, e.g. routing. But what if you need access to that configuration to implement a certain feature? For example, the vuex-router-sync module watches for route changes to sync the current route with the Vuex state. How could this be done in NuxtJS?

Mock Fetch in TypeScript Jest Tests for Vue.js

May 17th 2019 Unit Testing Jest Vue.js

When creating my first Vue.js project I configured it for TypeScript support and Jest based unit testing. This might not be the most common setup but it does express my tooling preferences. To no surprise, the first component I wanted to unit test used fetch which meant I also had to use jest-fetch-mock to mock its calls. There were a couple of obstacles on the way to the first working test.

Hosting a Vue.js App in Hippo CMS

April 19th 2019 Hippo CMS Vue.js Maven

Hippo CMS wasn't designed for web application development. While you could theoretically develop an application as a Hippo component, you would miss a lot of tooling that you are taking for granted today. As an alternative, you could develop a single page application (SPA) using any modern JavaScript framework and then serve the resulting static files (HTML, JS and CSS) from Hippo. In this post I will describe my configuration for developing an application in Vue.js.