Visual Studio 2022 Vue

Posted on  by admin
-->

Applies to: Visual Studio Visual Studio for Mac

In this article, you learn how to build an ASP.NET Core project to act as an API backend and a Vue project to act as the UI.

Currently, Visual Studio includes ASP.NET Core Single Page Application (SPA) templates that support Angular, React, and Vue. The templates provide a built in Client App folder in your ASP.NET Core projects that contains the base files and folders of each framework.

Starting in Visual Studio 2022 Preview 2, you can use the method described in this article to create ASP.NET Core Single Page Applications that:

  • Visual Studio 2022 Preview 2 or later. Go to the Visual Studio downloads page to install it for free.
  • npm (https://www.npmjs.com/), which is included with Node.js. Vue.js (Installation | Vue.js (vuejs.org)).

Vue.js CLI ((Installation | Vue.js (vuejs.org)).

In the New Project Dialog, select Create a new project. Search for Vue in the search bar at the top and then select Standalone JavaScript Vue Template or Standalone TypeScript Vue Template, based on your preference.

Prerequisites

Make sure to have the following installed:

  • Give your project and solution a name. In Solution Explorer, right-click the Vue.js project, select Properties, and then go the Debugging section. Change the Debugger to launch to the launch.json option. npm running the vue-cli-service start command. Check console output for messages, such as a message instructing you to update your version of Node.js.
  • Modified2 days ago. I installed Visual Studio 2022 and used the following tutorial to create an app with a vue frontend (javascript or typescript) and a .net core 6 backend.
  • I can start and debug both my projects at once.

Create the frontend app

  1. However, if I set a breakpoint in the frontend javascript code of a component the breakpoint is not hit.

  2. I already enabled script debugging. Debugging inside DevTools is of course possible. Is it possible to debug the app inside Visual Studio?

  3. 2323 gold badges111111 silver badges177177 bronze badges. 177177 bronze badges. Watch the recordings of the Visual Studio 2022 launch event to learn about what's new, hear tips & tricks, and download free digital swag.

Once the project is created, you see some new and modified files:

  • May 10, 2022 — Visual Studio 2022 version 17.0.10.
  • April 19, 2022 — Visual Studio 2022 version 17.0.9.
  • April 12, 2022 — Visual Studio 2022 version 17.0.8.
  • March 8, 2022 — Visual Studio 2022 version 17.0.7.

Create the backend app

  1. February 8, 2022 — Visual Studio 2022 version 17.0.6. January 13, 2022 — Visual Studio 2022 version 17.0.5.

  2. December 16, 2021 — Visual Studio 2022 version 17.0.4.

  3. December 14, 2021 — Visual Studio 2022 version 17.0.3. November 30, 2021 — Visual Studio 2022 version 17.0.2.

    November 16, 2021 — Visual Studio 2022 version 17.0.1. November 08, 2021 — Visual Studio 2022 version 17.0.0.

  4. Updated Git for Windows version consumed by Visual Studio and installable optional component to 2.36.0.1. Fixed an issue with git integration, where if pulling/synchronizing branches that have diverged, output window would not show a localized hint on how to resolve it.

Set the project properties

  1. Fixed an issue where when opening a Git repositoryin Visual Studio, output window shows "One or more errors occurred."

  2. instead of the reason why the failure is happening, and how to address it. Updated the webview2 baseline in Daytona.

    Fixed vctip.exe regression from 17.0.8.

    Fixed a bug that prevented some applications built with Address Sanitizer (ASAN) to load in Windows 11.

Set the startup project

  1. Fixed another ASAN issue where multi-threaded applications with heap contention may experience deadlocks, false "wild pointer freed" reports, or a deadlock during process exit.

  2. Fixed issue ‘Unable to install any extension (vsix) for Visual Studio on an offline machine’.

Start the project

  1. Fixed an issue that would cause some animations for test execution to run in the background even when the associated test executions were complete. This causes slowdowns that were especially noticeable on high refresh rate monitors.

    The fix should improve the experience of using VS on high refresh rate monitors. Resolved an issue where Visual Studio would hang/freeze when using TFVC for an extended period of time (over an hour).

  2. Added installer command line to remove an unused channel. Improved performance on high refresh rate monitors. Fixed a hang during Visual Studio startup for Community SKU users. Updated the Visual Studio installer to properly record channel metadata.

  3. Released Bulletins in the Visual Studio Installer for an install or update. Added information about LTSC channel expiration dates to the Update Settings dialog.

    • Added ability to programmatically change the source location of updates independently of actually performing the update.
    • This enables IT admins to programmatically change the update channel.

    Updated the GitHub add account experience to improve its success rate.

    Addressed occasional instance where VSInstr would not exit when instrumenting a binary with volatile metadata causing Instrumentation Profiling to fail.

You should see the Vue app appear, that is populated via the API.

Troubleshooting

Proxy error

You may see the following error:

If you see this issue, most likely the frontend started before the backend. Once you see the backend command prompt up and running, just refresh the Vue app in the browser.

Otherwise, if the port is in use, try 5002 in launchSettings.json and vue.config.js.

Docker

If you enable Docker support while creating the web API project, the backend may start up using the Docker profile and not listen on the configured port 5001. To resolve:

Edit the Docker profile in the launchSettings.json by adding the following properties:

Alternatively, reset using the following method:

  1. Fixed the problems where link.exe occasionally crashes or hangs when producing PDB along with binary.
  2. Fixed a bug in C++ Concurrency::parallel_for_each that was crashing the calling process due to integer overflow.
  3. Fixed a bug in ATL's CString comparisons under C++20 and C++Latest language modes.