Vue-cli-3 "npm run build/watch": I want the same outputDir for WordPress theme

Question

I'm trying to get the same outputDir (and publicPath) for the npm run build and npm run watch commands.

I'm trying to use vue-cli to create components that I can use within my WordPress Theme. My theme will pass the components the data they need via props. So, it would be most convenient if I could use npm run watch to build the various components and then have them output to the /wp-content/themes/mytheme/js folder so that all I have to do is hit refresh when I change something in the Vue component.

So far, I have this in vue.config.js but it only works with npm run build and it includes all the various other stuff for an SPA which I don't want.

// vue.config.js
const path = require('path')

module.exports = {
    publicPath: '/wp-content/themes/wvd/dist/',
    outputDir: path.resolve(__dirname, "../../dist"),
    filenameHashing: false,
    chainWebpack: config => {
        config.optimization.delete('splitChunks')
    }
}

is there any way to configure this, so that I can have just that app.js and app.css in the ...../dist folder without all the other SPA stuff for both npm run build and npm run watch?

Thanks. :)

Answer 1

SO what I ended up doing a while back was to add to package.json

{
  ...,
  scripts: {
    ...,
    'watch' : 'vue-cli-service build --watch --inline-vue',
    ...,
  }
}

while using the following settings in vue.config.js

module.exports = {
  'publicPath': '/wp-content/themes/my_theme/dist/js',
  'outputDir': '../dist',
  'filenameHashing': false,
  runtimeCompiler: true,
  'css': {
    extract: true,
  },
}

Thought I'd update this here just in case someone was trying to do the same.