Vue SPA Template #313

New Issue

fergalmoran · 2025-08-09T17:15:49Z

fergalmoran commented

2025-08-09 17:15:49 +00:00

Originally created by @FooBartn on 11/19/2017

I used the dotnet new vue SPA template, and tested it out this weekend. Some of the packages in this template are quite far behind and have security issues, etc. With a few minor changes, all packages can be updated to their latest stable versions.

The primary change is that, unless other code is updated, you need to set the esModule option in vue-loader to false. Also need to add lang="ts" to the .ts imports in vue files.

I personally removed the ".html" from my vue files, removed awesome-typescript-loader, installed ts-loader, and set up my webpack config like so:

return [{
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.vue', '.ts' ] },
        entry: { 'main': './ClientApp/boot.ts' },
        module: {
            rules: [
                { test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { esModule: false } },
                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },

example of script import:

<script lang="ts" src="./fetchdata.ts"></script>

dependencies:

  "devDependencies": {
    "@types/webpack-env": "^1.13.2",
    "aspnet-webpack": "^2.0.1",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "event-source-polyfill": "^0.0.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.2.1",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "url-loader": "^0.6.2",
    "vue": "^2.5.6",
    "vue-loader": "^13.5.0",
    "vue-class-component": "6.1.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.6",
    "webpack": "^3.8.1",
    "webpack-hot-middleware": "^2.20.0"
  }

From my testing, all of the example code is functioning as expected in the template. Would it be acceptable to make these changes and submit a PR to the templating repo?

*Originally created by @FooBartn on 11/19/2017* I used the dotnet new vue SPA template, and tested it out this weekend. Some of the packages in this template are quite far behind and have security issues, etc. With a few minor changes, all packages can be updated to their latest stable versions. The primary change is that, unless other code is updated, you need to set the esModule option in vue-loader to false. Also need to add lang="ts" to the .ts imports in vue files. I personally removed the ".html" from my vue files, removed awesome-typescript-loader, installed ts-loader, and set up my webpack config like so: ``` return [{ stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.vue', '.ts' ] }, entry: { 'main': './ClientApp/boot.ts' }, module: { rules: [ { test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { esModule: false } }, { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, ``` example of script import: `<script lang="ts" src="./fetchdata.ts"></script>` dependencies: ``` "devDependencies": { "@types/webpack-env": "^1.13.2", "aspnet-webpack": "^2.0.1", "bootstrap": "^3.3.7", "css-loader": "^0.28.7", "event-source-polyfill": "^0.0.11", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "isomorphic-fetch": "^2.2.1", "jquery": "^3.2.1", "style-loader": "^0.19.0", "ts-loader": "^3.1.1", "typescript": "^2.6.1", "url-loader": "^0.6.2", "vue": "^2.5.6", "vue-loader": "^13.5.0", "vue-class-component": "6.1.0", "vue-property-decorator": "^6.0.0", "vue-router": "^3.0.1", "vue-template-compiler": "^2.5.6", "webpack": "^3.8.1", "webpack-hot-middleware": "^2.20.0" } ``` From my testing, all of the example code is functioning as expected in the template. Would it be acceptable to make these changes and submit a PR to the templating repo?

fergalmoran closed this issue

2025-08-09 17:15:49 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#313