I came to a point where I would gladly import a .vue file in my server-side code. Deeply, I don't really use the *.vue file exports yet but some code is common for client-side and server-side and refer these files.
I am using ts-node now for dev/debug and I use webpack to bundle my client-code with my *.vue files.
I tried many solutions but found none really working - even the .d.ts refered in tsConfig.json
declare module '*.vue' {
import Vue = require('vue')
const value: Vue.ComponentOptions<Vue>
export default value
}
Does anyone know an elegant solution or should I just resign to use webpack for the server-side also? (I have hesitations as the compilation is already quite slow with the client-side compilation only)
I would suggest extracting the code that is common to both client and server to a separate directory or package, then you can import this code in both the server and client code.
I'm not sure how you've setup your project, but one way to approach this would be to use a monorepo setup (you could check out lerna, npm workspaces, yarn workspaces). Another approach would be to put the common code in directory that acts as its own npm package, with its own package.json file. Then from the package.json files in the client and server code you could referenc the common package as a dependency and use the file:../path/to/common url to point to a local directory from your npm directory.