Develop using Visual Studio
Essentially this is why we recommend Rider where it's best at both, where both C# and JS/TypeScript projects can be developed from within the same solution.
Developing with just VS Code
If you prefer the dev UX of a lightweight text editor or your C# project isn't large, than VS Code on its own can provide a great development UX which is also what Vue recommends themselves, to be used together with the Volar extension.
VSCode's Integrated Terminal has great multi-terminal
support you can toggle between the editor and terminal with
Ctrl+ or open a new Terminal Window with
Ctrl+Shift+` to run Tailwind with:
$ npm run ui:dev
Then in a new Terminal Window, start a new watched .NET App with:
$ dotnet watch
With both projects started you can open a browser tab running at
https://localhost:5001 where it
will automatically reload itself at every
Ctrl+S save point.
Useful VS Code extensions
We recommend these extensions below to enhance the development experience of this template:
- Tailwind CSS IntelliSense - Add Intellisense for Tailwind classes
- es6-string-html - Add HTML Syntax Highlighting in string literals
Using Visual Studio
As your C# project grows you'll want to consider running the back-end C# Solution with Visual Studio .NET with its much improved intelli-sense, navigation, tests runner & debug capabilities.
As we've never had a satisfactory experience trying develop npm or JS/TypeScript projects with VS.NET, we'd recommend only using VS.NET for C# and Razor and continuing to use VSCode for everything else.
If you'd prefer to use Visual Studio for front-end development we recommend moving all JS to external files for a better Dev UX, e.g:
<script type="module" src="/Pages/SignIn.mjs"></script>
Deploying to Production
This template also includes the necessary GitHub Actions to deploy this Apps production static assets to GitHub Pages CDN, for more info, checkout GitHub Actions Deployments.
If you're new to Vue 3 a good place to start is Vue 3 Composition API.