adding vue

Selector.Web/Pages/Now.cshtml

@@ -6,6 +6,9 @@
 
 <div class="text-center">
     <h1 class="display-4">Now</h1>
+    <div id="app">
+        <h1>{{ count }}</h1>
+    </div>
 </div>
 
 @section Scripts {

Selector.Web/Pages/Shared/_Layout.cshtml

@@ -20,6 +20,9 @@
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a>
+                        </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                         </li>

Selector.Web/package.json

@@ -21,12 +21,15 @@
   "homepage": "https://github.com/Sarsoo/Selector#readme",
   "dependencies": {
     "@microsoft/signalr": "^5.0.11",
-    "bootstrap": "^5.1.3"
+    "bootstrap": "^5.1.3",
+    "vue": "^3.2.21"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.21",
     "clean-webpack-plugin": "^4.0.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.4.4",
+    "vue-loader": "^15.9.8",
     "webpack": "^5.59.1",
     "webpack-cli": "^4.9.1",
     "webpack-merge": "^5.8.0"

Selector.Web/scripts/index.ts

@@ -1,13 +0,0 @@
-import {SecondWatcher} from "./second";
-
-namespace Selector.Web {
-    class Watcher {
-        static example: string = "string";
-        static ex2: string = "awdwad";
-    }
-}
-
-let sec = new SecondWatcher();
-
-console.log("hello world!");
-console.log(sec);

Selector.Web/scripts/now.ts

@@ -1,4 +1,5 @@
 import * as signalR from "@microsoft/signalr";
+import * as Vue from "vue";
 import { FullTrack, CurrentlyPlayingDTO } from "./HubInterfaces";
 
 const connection = new signalR.HubConnectionBuilder()
@@ -9,9 +10,15 @@ connection.on("OnNewPlaying", (context: CurrentlyPlayingDTO) => console.log(cont
 
 connection.start().catch(err => console.error(err));
 
-/// <reference path="Interface/HubInterface.ts" />
-namespace Selector.Web {
-    
+const app = Vue.createApp({
+    data() {
+        return {
+            count: 4
         }
-
-console.log("NowPlaying!");
+    },
+    created() {
+        console.log(this.count);
+    }
+});
+// app.component("", TrackNowPlaying);
+const vm = app.mount('#app');

Selector.Web/scripts/second.ts

@@ -1,5 +0,0 @@
-
-export class SecondWatcher {
-    public static example: string = "string";
-    public static ex2: string = "awdwad";
-}

Selector.Web/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "compileOnSave": true,
     "compilerOptions": {
+        "strict": true,
         "sourceMap": true,
         "noImplicitAny": true,
         "noEmitOnError": true,
@@ -8,7 +9,14 @@
         "target": "es5",
         "allowJs": true,
         "moduleResolution": "node",
-        "outDir": "./wwwroot/js"
+        "outDir": "./wwwroot/js",
+        "baseUrl": ".",
+        "rootDir": "./scripts",
+        "paths": {
+            "@/*": [
+                "./scripts/*"
+            ]
+        }
     },
     "include": [
         "scripts/**/*"

Selector.Web/webpack.common.js

@@ -3,7 +3,6 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
     entry: {
-        index: './scripts/index.ts',
         now: './scripts/now.ts',
     },
     module: {
@@ -11,14 +10,26 @@ module.exports = {
             {
                 test: /\.tsx?$/,
                 loader: 'ts-loader',
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                },
                 exclude: /node_modules/,
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
             }
         ]
     },
     plugins: [
         new CleanWebpackPlugin()
     ],
-    resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
+    resolve: { 
+        extensions: ["*", ".js", ".jsx", ".ts", ".tsx", ".vue"] ,
+        alias: {
+            vue: "vue/dist/vue.esm-bundler.js"
+        }
+    },
     output: {
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'wwwroot/js')