Vue.Simple.Template 0.7.0

Vue Simple Template

This template was created to interact with a vue.js project inside an asp.net core app using the Spa Services library. It aims to be minimalistic with its approach. It also favors Vue's single file component over Typescript, since one of the efforts is to minimize friction when transitioning from a vue-cli project into this template.

This template targets net 6.0

Builds

Appveyor	Branch
	master

Packages

NuGet (Stable)	MyGet (Prerelease)

Prerequisites

You must have net 6.0 installed. It also depends on Node.js (version 14) and npm (version 6) must exist in order to use the Vue Client App. The project will not compile if Node.js or Npm aren't present.

Installation

To install the template, via command line simply using nuget:

dotnet new -i "Vue.Simple.Template::*"

where * is the equivalent of the latest version of the template.

If you would like to tinker with the code locally, you can clone the repository and execute the following command with the dotnet command, using the path of the repo:

dotnet new -i "$PATH_OF_NUPKG_FILE"

Alternatively, you can use the myget prerelease package, by installing using the following command:

dotnet new -i "Vue.Simple.Template::*" --nuget-source https://www.myget.org/F/vue-simple-template/api/v3/index.json

Once installed as a template you can properly create your own custom projects using the template using the following command:

dotnet new simplevue -o MyAppName

It will generate the following folder structure:

$
.
├── .editorconfig
├── appsettings.Development.json
├── appsettings.json
├── Program.cs
├── Startup.cs
├── {ProjectName}.csproj
├── {ProjectName}.sln
├── /ClientApp
│   ├── package.json
│   ├── package-lock.json
│   ├── jsconfig.json
│   ├── babel.config.js
│   ├── vue.config.js
│   ├── /public
│   │    ├── favicon.ico
│   │    └── index.html
│   ├── /src
│   │    ├── main.js
│   │    ├── App.vue
│   │    ├── /assets
│   │    │    └── logo.png
│   │    └── /views
│   │         └── HelloWorld.vue
│   │
│   └── /node_modules
├── /Controllers
│   └── MainController.cs
└── /Views
    ├── _ViewStart.cshtml
    ├── _ViewImports.cshtml
    ├── /Shared
    │    └── _Layout.cshtml
    └── /Main
         └── Index.cshtml

Then proceed to:

cd MyAppName
npm install

The ClientApp folder includes the default project created using the vue-cli 3.0. You can (optionally) replace the contents of the clientApp folder with your own custom vue project, since this template interacts directly with the vue commands, for building and debugging purposes.

For more information on how to interact with the new vue-cli 3.0, you can check this tutorial

Vue-Cli also has the ability to scaffold an app using vue ui which is an alternative to the command line vue installation.

Uninstalling

The syntax for uninstalling from the command line is the following:

dotnet new -u "Vue.Simple.Template"

Or

dotnet new -u "$PATH_OF_NUPKG_FILE"

Previous Versions

The table below includes the latest template version alongside the netcore version which it targets

These are all available on nuget

Further info

For More information on how to manage dotnet custom templates see the docs.microsoft documentation

Contributing

Check the contribution guide