use single file component in a project created with dotnet new vue - vue.js

Question

I crated a new .net core project using the SPA template from https://github.com/MarkPieszak/aspnetcore-Vue-starter#getting-started
with dotnet new vuejs
After restoring packages with npm install I could sucesully open the project and run it from Visual Studio.
I now wanted to use a single file component by adding a file about.vue in /ClientApp/components/about/.
I changed app.ts to use
#Component({
components: {
MenuComponent: require('../navmenu/navmenu.vue.html'),
AboutComponent: require('../about/about.vue')
}
})
When I now run the application I get the error
ERROR in ./ClientApp/components/about/about.vue
Module parse failed: C:\playground\vue-journey\ClientApp\components\about\about.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="about">
| <h1>This is an about page</h1>
# ./~/awesome-typescript-loader/dist/entry.js?silent=true!./ClientApp/components/app/app.ts 30:28-57
# ./ClientApp/components/app/app.vue.html
# ./ClientApp/boot.ts
# multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
I did not change the webpack.config because to me it looks like it has the required loader.
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
entry: { 'main': './ClientApp/boot.ts' },
module: {
rules: [
{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
{ test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
What do I have to do to compile single file components?
Edit
The file component itself only contains a template and it works in a project I created with vue cli.
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

Answer 1

From the documentation, it appears you're missing the Vue loader plugin.
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}

Answer 2

The project was created with a different template then what I thought
I actually used dotnet new vuejs
not dotnet new vue. Stuff like that happens around midnight.