.NET 6.0 Vue Nuxt.js App Template
$ dotnet tool install -g x $ x new vue-nuxt ProjectName
Alternatively write new project files directly into an empty repository, using the Directory Name as the ProjectName:
$ git clone https://github.com/<User>/<ProjectName>.git $ cd <ProjectName> $ x new vue-nuxt
Nuxt is an opinionated structured framework for rapidly developing Web Applications utilizing developer-friendly Vue Single Page Components and featuring Hot module replacement that together with .NET Core’s watched builds provides an highly productive development experience.
Nuxt also enables the development of high-performance responsive Web Apps by employing advanced packaging techniques like automatic code spliting, link prefetching, SPA navigation of statically-generated cacheable assets and integrated support for ES6/7 transpilation and js/css bundling and minification.
After creating your project go to your
ProjectName folder and install your client App dependencies with:
$ npm install
If your IDE doesn’t automatically install your .NET NuGet Dependencies, you can manually install them with:
$ dotnet restore
Start a watched .NET Core build in the background from the command-line with:
$ dotnet watch run
In a new terminal window start a watched nuxt dev server build with:
$ npm run dev
dtos npm script:
$ npm run dtos
This will update the Servers
dtos.ts and generate its corresponding
dtos.js which can be imported as normal classes as seen in
gateway.js. Despite the App not being built with TypeScript, developing using a “TypeScript-aware” IDE like VS Code will still be able to utilize the TypeScript classes in @servicestack/client and the generated
dtos.ts to provide a rich, typed intelli-sense experience.
Generate Static Production Build
Most of the time during development you’ll be viewing your App through Nuxt.js dev server to take advantage of it’s Hot Module Replacement for instant UI updates. At any time you can also view a production build of your App with:
$ npm run build
Which will generate an encapsulated production build of your App in
/wwwroot which you can view running from your ServiceStack Server App directly:
Publishing App for Deployment
To create a release client and server build of your App run:
$ npm run publish
Which will publish your App to
bin/Release/net5/publish which you can deploy as a standard .NET Core App.