.NetCore MVC project with Vue components via Vite

Currently just installing vuejs with libman doesn’t cut it. Soo, I have taken this approach, that I happen to find a little bit more elegant.

Create the .Netcore Project.

dotnet new mvc -o ProjectName

Build and run the project.

dotnet build &&  dotnet run

Once you have your .netcore project running we are going to create the Vite project inside the .net one.

npm create vite@latest

We simply run the wizzard and select vue and js for the current tutorial.
cd into your vue project, I happened to call mine vue for simplicity purposes.
If you run npm run dev you happen to have your vite project inside a .netcore one. That's good but we want to tinker this a little more.
We are going to configure our vite.config.js in order to have two things: A) server port and B) the output dir will point to our wwwroot folder.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // We define the port
  server: {
    port: 5000
  },
  // And the build target
  build:{
    outDir:"../wwwroot/client"
  }
})

We are going to tinker this a little bit. We can delete lots of stuff that we are not going to use but for now.
We are going to open the main.js file in the src folder and we are going to use the esm-bundler.

import { createApp } from 'vue/dist/vue.esm-bundler'

createApp().mount('#app')

After this we go back to our .netcore project. And in our _Layout.cshtml file we do the following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DotVue</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/DotVue.styles.css" asp-append-version="true" />
    @* We add the view Libs *@
    @*Development in order to see the live changes *@
    <script type="module" src="http://localhost:5000/src/main.js" defer></script>
    @*Prod we get the file from what vite compiles.*@
    @* <script type="module" src="~/client/assets/index.js" defer></script> *@
</head>
<body>
    <div id="app" >
      <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">DotVue</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
      </header>
      <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
      </div>

    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - DotVue - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Lets test our app. cd into the vite app and run npm run dev. Start the dotnet app in the root folder of the project. dotnet run

Voila! Now if we open the developer tools we are able to see the Vuejs Devtools!
But Lets create a component!
We create a Vue component in the Components folder.
Add the component in the main.js file
Add the component to one of the asp files.
Now we can see the data that was declared in the vue component.

Example Repo:
repo

Blog

.NetCore MVC project with Vue components via Vite

Omar Ponce

Join Our Newsletter. No Spam, Only the good stuff.

Related