How to use vuejs 2 in multiple html pages using typescript and ASP.Net Core
I have ASP.Net Core MVC with razor views that uses VueJs2 when it needs to be more complex.
I want to have a js file for each view.
My folder structure is like this:
├ Controllers\HomeController.cs (with actions Index & Details)
├ Scripts\Home\index.ts
├ Scripts\Home\details.ts
├ Views\Home\Index.cshtml
├ Views\Home\Details.csthml
├ wwwroot\lib\vue
├ wwwroot\js\Home\index.js (generated with typescript)
├ wwwroot\js\Home\details.js (generated with typescript)
├ tsconfig.json
Here is my tsconfig.json
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js",
"rootDir": "Scripts",
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es5",
"es2015.promise"
]
},
"include": [
"wwwroot/lib/vue/typings",
"Scripts"
],
"compileOnSave": true
}
My index.ts file
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
And the generated file:
"use strict";
var vue_1 = require("vue");
var app = new vue_1.default({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
//# sourceMappingURL=index.js.map
In my Index.cshtml I am loading a js file, but I have an instruction that does not work in my browsers.
How do I get these js files to work in the browser?
source to share
Please note that in tsconfig.json , since you did not specify the parameter "module"
, by default it is equal "commonjs"
, specify this or another value (see below) explicitly.
The problem is that browsers don't support modules yet. Those with incomplete, preliminary support. To use modules in a browser, you need a loader or wrapper.
Hard options include SystemJS (optional with jspm), RequireJS, Webpack, or Browserify.
Some notes:
In tsconfig.json "compilerOptions"
Install "module": "system"
if you go with SystemJS.
Install "module": "amd"
and uninstall "allowSyntheticDefaultImports"
if you go from RequireJS.
Install "module": "commonjs"
if you go with Webpack.
Install "module": "commonjs"
and uninstall "allowSyntheticDefaultImports"
if you go with Browserify.
source to share