This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8. You must have Visual Studio installed and the Node.js development workload. If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.
If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.
If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer. Choose the Node.js development workload, then choose Modify. You must have the Node.js runtime installed. If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.
|Objective:||To setup a local Vue development environment, create a starter app, and understand the basics of how it works.|
A clearer Vue
Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Only one is required and the Node.js installer only supports one being installed at a time.
In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects. If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.
For detailed instructions, see the Prerequisites. Visual Studio creates the new project. The new project opens in Solution Explorer (right pane). Check the Output window (lower pane) for progress on installing the npm packages required for the application. In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed. If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.
Initializing a new project
Take a look at Solution Explorer in the right pane. Highlighted in bold is your project, using the name you gave in the New Project dialog box. On disk, this project is represented by a .njsproj file in your project folder.
- At the top level is a solution, which by default has the same name as your project. A solution, represented by a .sln file on disk, is a container for one or more related projects.
- The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.
- If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here. In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.
- Check the Output window to see build results, and choose Build from the Show output from list. (TypeScript project only) From Visual Studio, choose Build > Clean Solution.
- Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. In the console, you see a message Starting Development Server. Then, the app opens in a browser.
Then we'll utilize command-line tools to empower your Vue app to scale to enterprise level. Next, we'll develop your app with modular component architecture to help keep it maintainable. Finally, you'll handle your app's reactive data with global state management. Ready to take your front-end skills to the next level? See you in the first chapter! Learning Outcomes. By the end of this course, you will be able to:. Build a Vue.js application. Scale your application with Vue CLI. Create reusable components in Vue.js.
You can acquire these skills by taking the following course and its prerequisites:. Put the client app in a separate project, outside from the ASP.NET Core project.
- Create the client project based on the framework CLI installed on your computer. Currently, the front-end project must be published manually (not currently supported with the Publish tool).
- For additional information, see https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135. Visual Studio 2022 Preview 2 or later with the ASP.NET and web development workload installed. Go to the Visual Studio downloads page to install it for free.If you need to install the workload and already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.
- Choose the ASP.NET and web development workload, then choose Modify. npm (https://www.npmjs.com/), which is included with Node.js.
- In Solution Explorer, right-click the ASP.NET Core project and choose Properties. Go to the Debug menu and select Open debug launch profiles UI option. Clear the Launch browser option. Currently, launch.json must be located under the .vscode folder. Right-click the solution and select Set Startup Project. Change the startup project from Single startup project to Multiple startup projects. Select Start for each project’s action. Next, select the backend project and move it above the frontend, so that it starts up first. Before you start the project, make sure that the port numbers match. Go to the launchSettings.json file in your ASP.NET Core project (in the Properties folder). Get the port number from the applicationUrl property.
In the Debug menu, switch the profile using the Start button drop-down menu to the profile for your backend app.
.vue files (single file components)
Next, in the Solution properties, reset to multiple startup projects.
While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in
.vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.
As a bonus, projects created with the Vue CLI are configured to use
.vue files with Webpack out of the box. In fact, if you look inside the
src folder in the project we created with the CLI, you'll see your first
Let's explore this now.
App.vue file — you'll see that it has three parts:
, which contain the component's template, scripting, and styling information. All Single File Components share this same basic structure.
contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.
Note: By setting the
lang attribute on the
tag, you can use Pug template syntax instead of standard HTML —
. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.
contains all of the non-display logic of your component. Most importantly, your
tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a
In the case of
App.vue, our default export sets the name of the component to
App and registers the
HelloWorld component by adding it into the
components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.
Note: If you want to use TypeScript syntax, you need to set the
lang attribute on the
tag to signify to the compiler that you're using TypeScript —
is where you write your CSS for the component. If you add a
scoped attribute —
— Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.
Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a
lang attribute to the
tag so that the contents can be processed by Webpack at build time. For example,
will allow you to use SCSS syntax in your styling information.
Running the app locally
The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a
serve command to the project's
package.json file as an npm script, so you can easily run it.
In your terminal, try running
npm run serve (or
yarn serve if you prefer yarn). Your terminal should output something like the following:
If you navigate to the "local" address in a new browser tab (this should be something like
http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.
Making a couple of changes
Let's make our first change to the app — we'll delete the Vue logo. Open the
App.vue file, and delete the
element from the template section:
If your server is still running, you should see the logo removed from the rendered site almost instantly. Let's also remove the
HelloWorld component from our template.
First of all delete this line:
If you save your
App.vue file now, the rendered app will throw an error because we've registered the component but are not using it. We also need to remove the lines from inside the
element that import and register the component:
Delete these lines now:
Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside
Let's add a new Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes. With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos. In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.
App.vue will now show our heading, as you'd expect.
In this module
Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.
With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.
In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.