Watch and reload api folder in Vue Nuxt

Question

How to make nuxt watch for "non standard" directories and recompile / reload itself, and more specifically for dirs with additional server apis?

I have my express api in ~/api/. Since I reference the directory in serverMiddleware with '~/api', I would expect Nuxt to reload when I make some changes to the files in that dir, but it doesn't.

I'm simply using npm run dev that fires nuxt, I don't have any direct control on either nodemon (if it's used internally) or on webpack (that I'm pretty sure is). I tried adding watch: [ '~/api/*.js'], watch: [ '~/api/index.js'], watch: [ '~/api/**/*.js'] to build in nuxt.conf.js but with no luck.

Answer 1

Simply use watch: ['api/**/*.js'] or watch: ['api'].

Contrary to what the docs show custom paths in build.watch are not normalized via Nuxt.resolveAlias(), which means that Nuxt prefixes like ~ and @ are not replaced by the actual paths.
Further down the line, when the watchers get created via chokidar, the checked path will still be "~/api" (which doesn't exist).

Bug report: https://github.com/nuxt/nuxt.js/issues/2983

Answer 2

You can use nodemon to watch for changes inside your api folder. First install:

npm install --save-dev nodemon

or:

yarn add nodemon --dev

Then add this code inside of your package.json

{
  "scripts": {
    "dev": "nodemon --watch api --exec \"nuxt\"",
  },
}