In the midst of a large project that is mostly developed, I find myself needing to integrate Vue.js for specific small sections of the application. To achieve this, I have opted to import Vue.js using a CDN version and a <script> </script> tag in the HTML.
Initially, working with JavaScript and utilizing the imported Vue.js posed no issues. However, in a bid to enhance code quality and ensure scalability, I am looking to switch to Typescript from JavaScript, thus creating a roadblock.
It's worth mentioning that Vue CLI is not an option for me as I only require Vue in minor segments of my app.
After exhausting various attempts, I have hit a snag in getting it to function. For the sake of brevity, I will simplify my problem. Here are all the files in my possession:
The file structure includes:
-index.html
-vue.js
-ts/
-generated/
-/node_modules/
-index_javascript.js
-index_typescript.ts
-package.json
-tsconfig.json
-webpack.config.production.js
Utilizing index_javascript.js with Vue poses no difficulties; everything functions smoothly. However, replicating the same functionality with Typescript in the file index_typescript.ts proves to be challenging.
Here is the content of index_javascript.js:
const myApp = new Vue({
data() {
return {
msg: "Hello",
};
},
methods: {
// Annotation required due to `this` in return type
greet() {
return this.msg + " world";
},
},
});
myApp.$mount("#app");
Here is the content of index_typescript.ts:
import { Vue } from "../vue";
const myApp = new Vue({
data() {
return {
msg: "Hello",
};
},
methods: {
// Annotation required due to `this` in return type
greet() {
return this.msg + " world";
},
},
});
myApp.$mount("#app");
Here is the content of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js" defer></script>
<script src="./ts/index.js" defer></script>
</head>
<body>
<div class="" id="app">
<p class="">My number is: {{ greet() }}</p>
</div>
</body>
</html>