Just a heads up.

I saw your previous #5 issue on HMR not working.

I added the following to the Startup.Configure method.

using Microsoft.AspNetCore.SpaServices.Webpack;

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true });

Once I do this, HMR works just fine. I don't have to hit F5 all I have to do is hit save.

This project can't run with dotnet core 3.0, can you update it in order to run with dotnet core 3.0 and above.

How difficult would it be to create a version of this that uses plain JS and CSS? Perhaps you would consider a branch or a follow up post on this topic.

I like the multi-page app format and this is the closest I have found. I'm trying to avoid having to learn so many technologies all at once so a version of this without TS and SASS would help trim it down a bit.

Could you give an example of how to localize the client apps?
I'm using 'ResxToJson' nuget package to convert resx files to i18n format via a build task, but how would I then integrate the generated Javascript into the client.
Do you suggest putting the i18n files into the common folder, or have one i18n file per app? I would like to integrate 'vue-i18n'.
https://kazupon.github.io/vue-i18n/

thanks in advance!

😃

Hi there, I was wondering if you could create the following:

ASP.Net Core 3.1
Vue.js (latest)
HMR
WebPack
Razor Pages/MVC (either is fine)
SCSS support

I have been having so much trouble just getting one of the many "attempts" out there to work and not be all about the SPA.

Thanks

Hi @danijelh would you mind to show me how I add Vuetify in the project? Thanks.

I tested several times, and HMR does not work. Does it work for you?

Let's say we have initial webpack.config.js where options of vue-loader specified as:

{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        preserveWhitespace: false,
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader", // <style lang="scss">
            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax" // <style lang="sass">
        }
    }
}

and in VueApp/idontneedtypescript/App.vue styles specified without lang="scss":

<style scoped>
    .custom-class {
        background: red;
    }
</style>

Then vue-loader does not include simple css styles in extracted css file in wwwroot/dist/css/main.css.

Hi Daniel,

I love this repo. I keep coming back to it because I find it so interesting.

I have a question for you please,

Do you think its possible to combine react together in this project? Or would it make the Webpack config tooooo crazy?

Did you ever experiment with using a central store? maybe using LocalStorage hooked up to Vuex so the different isolated Vue apps could still talk to each other? Maybe to do this there would need to be some kind of eventing system which is shared between the different SPAs I suppose?

Your Answers would be very much appreciated If you have the time

Kind Regards

First of all, thank you for this awesome repo.

Just need a help with publishing to Azure VM. While I can publish to local folders without any issues, I got some errors when trying to publish to Azure VM via Web Deploy.

The following errors have stopped me from publishing:

Severity	Code	Description	Project	File	Line	Suppression State
Error	TS1148	(TS) Cannot use imports, exports, or module augmentations when '--module' is 'none'.	Miscellaneous	~\iceandfire\App.vue	36	Active
Severity	Code	Description	Project	File	Line	Suppression State
Error	TS1219	(TS) Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.	Miscellaneous	~\iceandfire\App.vue	46	Active
Error	TS2307	(TS) Cannot find module 'vue'.	Miscellaneous	~\iceandfire\App.vue	36	Active
Error	TS2307	(TS) Cannot find module 'vue-property-decorator'.	Miscellaneous	~\iceandfire\App.vue	37	Active

Any help would be appreciated. Thanks.

npm verb stack Error: 404 Not Found: [email protected]
npm verb stack at fetch.then.res (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\fetchers\registry\fetch.js:42:19)
npm verb stack at tryCatcher (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
npm verb stack at Promise._settlePromiseFromHandler (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
npm verb stack at Promise._settlePromise (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
npm verb stack at Promise._settlePromise0 (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
npm verb stack at Promise._settlePromises (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:694:18)
npm verb stack at _drainQueueStep (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:138:12)
npm verb stack at _drainQueue (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:131:9)
npm verb stack at Async._drainQueues (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:147:5)
npm verb stack at Immediate.Async.drainQueues [as _onImmediate] (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
npm verb stack at processImmediate (timers.js:632:19)
npm verb cwd C:\dev\Playground\Web.VueTs\Web.VueTs
npm verb Windows_NT 10.0.17763
npm verb argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "--verbose"
npm verb node v11.8.0
npm verb npm v6.5.0
npm ERR! code E404
npm ERR! 404 Not Found: [email protected]
npm verb exit [ 1, true ]

Hi Mate, I just wanted to say Fantastic Article, and AMAZING Repo you have here! Great work.

Your repo confirmed a few things I was wondering if was possible. I do alot of work for clients, whom already have existing stuff. I was saavy with vue cli (and I love it), but often would not get to work with it on clients software.

What you have provided here is a means of integrating multiple mini spas accross multiple razor pages and I rekon this is awesome.

cheers

I had to install node-sass manually

npm install -save-dev node-sass

Before the js side of the app would build properly.

I quess people who use sass usually have this installed globally, so it's missing from the template?