Develop using Visual Studio
A popular alternative development environment to our preferred JetBrains Rider IDE is to use Visual Studio, the primary issue with this is that VS Code is a better IDE with richer support for JavaScript and npm projects whilst Visual Studio is a better IDE for C# Projects.
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.
Get Started
If you're new to Vue 3 a good place to start is Vue 3 Composition API.
