Can we keep HTML, JS and CSS files separate while creating Vue.js components like in Angular?

I found this in the docs but not sure it's what you're looking for

<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

And doc comment

Even if you don’t like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files

IMHO when you approach a new framework, you'll usually need to leave the conventions of other frameworks behind. For example, trying to shoehorn in an Angular style into a Vue project is likely to cause more pain, and limit the benefits of the new framework. This is the same for React, Aurelia, Ember etc. They all do things in their own way and it is best to follow their conventions for a number of reasons.

To answer your question: I didn't find a way to split the files which I agree would have been nice, for example;

- myfile.html.vue
- myfile.css.vue
- myfile.js.vue

My recent research of Vue found that combining related elements into a single *.vue file will give you benefits of encapsulation. But the trade off for good encapsulation is usually repetition. You'll need to decide whats the best pattern for you - Don't repeat yourself or Single responsibility?

I also found that I can use embedded Vue scripts and inline code for simple examples, but once I moved to *.vue files I then needed to consider a module bundler. Once this became apparent the simplicity of vue (which on the face of it is the main selling feature) was lost a little.