TypeScript support for config file (vue.config.ts)

[biluochun]

What problem does this feature solve?

Type tracking when configured.

What does the proposed API look like?

can config width: vue.config.ts
or
vue.config.js:

  const VueConf = require('@vue/conf');
  VueConf({
    // baseUrl/assetsDir/devServer/... conf in here
  });

[yyx990803]

Yeah could be nice to have.

Also /cc @octref

Is there anyway for VSCode to have special type checking / autocomplete for vue.config.js, like for tsconfig.json?

[yyx990803]

I think we could have something like webpack does:

// vue.config.ts

import { Config } from '@vue/cli-service'

const config: Config = {
  // ...
}

export default config

If anyone want to work on this that'd be great. /cc @ktsn @HerringtonDarkholme

[octref]

special type checking / autocomplete for vue.config.js

JS/TS have different story for type checking / autocomplete than JSON. They are actually closer to what we have in Vetur — finding out the default export and wrap that in a typed function call.

We have plan on our roadmap to support linting / autocomplete for webpack and I believe when it's done it can be easily used to support vue.config.ts.

[ktsn]

I'll work on the vue.config.ts support. 👍

[beeequeue]

Any updates on this?

[kbtz]

We might as well enable JS type checking on vue.config.js.

On tsconfig.json enable JS type checking and make sure the config file is included somehow.
Mine looks like this:

{
	"compilerOptions": {
		// ...
		"checkJs": true,
	},
	"include": [
		// ...
		"vue.config.js"
	],
	// ...
}

Then import ProjectOptions with this specific syntax:

/**
 * @typedef { import("@vue/cli-service").ProjectOptions } Options
 */

Importing the definitions other ways didn't worked for me. Also on vscode I'm not getting any type checking errors, only code completions.

Here's a working example with code completion working in vscode even inside chainWebpack:

// vue.config.js
/**
 * @typedef { import("@vue/cli-service").ProjectOptions } Options
 */

const { ProvidePlugin } = require('webpack')
const { resolve, join } = require('path')

/** @param args {string[]} */
const path = (...args) => resolve(join(__dirname, ...args))

/** @type {Options} */
const options = {
	devServer: {
		host: 'bp.viz',
		port: 80,
	},
	chainWebpack: config => {
		config.merge({
			resolve: {
				modules: ['node_modules', path('src')],
			},
			devtool: 'source-map',
		})

		config.plugin('provide').use(ProvidePlugin, [
			{
				Component: ['vue-property-decorator', 'Component'],
				Base: ['./src/components/Base', 'Base'],
			},
		])
	},
}

module.exports = options

[beeequeue]

Can confirm this works!
I had to install @types/webpack-chain to make sure I got the proper types for chainWebpack as well.

My vue.config.js:

/**
 * @type { ProjectOptions }
 */
module.exports = {
  css: {
    sourceMap: true,
  },
  configureWebpack: {
    target: 'electron-renderer',
  },
  lintOnSave: false,
  chainWebpack: config => {
    const svgRules = config.module.rule('svg')

	// Remove default svg loader
    svgRules.uses.clear()

	// Instead use raw-loader
    svgRules.use('raw-loader').loader('raw-loader')
  },
}

[yoyoys]

Here's my vue.config.js config

/**
 * @typedef { import("@vue/cli-service").ProjectOptions } Options
 * @typedef { import("webpack-chain") ChainWebpack }
 */


/**
 * @type { Options }
 */
module.exports = {
  ....
  ....
  /** @type {ChainWebpack} */
  chainWebpack: config => {
    ....
    ....
  }
}

[Zonciu]

It works without checkJs.
Just install @types/webpack-chain to devDependency and add comments:

/**
 *  @typedef { import("@vue/cli-service").ProjectOptions } Options
 *  @type { Options }
 */
module.exports = {
...
}

[avxkim]

What's the status of vue.config.ts support?