My question is simple: why do I need to import the components twice in the code below for it to function properly?
In my current restricted environment, I am unable to utilize Webpack, .vue Single File Components, or npm. Despite these limitations, I managed to piece together a functioning Vue app using TypeScript files. However, I am puzzled by the necessity of importing the component file and then requiring it as a component.
This setup may not be ideal, especially since we plan to deploy this as a Proof of Concept with developers who are also new to Vue. Therefore, I would like to improve this process and avoid introducing bad practices from the beginning.
index.ts
import * as Vue from "vue";
import * as Apple from "./App";
Vue.component('apple2', Apple.default);
let v = new Vue({
el: "#app",
components: { Apple},
template: `
<div>
<apple2/>
</div>`,
data: {
name: "World"
},
});
App.ts
import * as Vue from "vue";
import * as fred from "./Hello";
Vue.component('fred2', fred.default);
export default Vue.extend({
name: 'Apple',
template: `
<div>
<fred2 :name="name" :initialEnthusiasm="4"/>
</div>`,
data() {
return { name: "World" }
},
components: { fred }
});
Index.html
<!doctype html>
<html>
<head>
<script src="scripts/vue.min.js"></script>
<script data-main="scripts/build/index" src="scripts/lib/require.min.js">
</script></head>
<body>
<div id="app"></div>
</body>
tsConfig
{"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"moduleResolution": "node",
"noImplicitAny": true,
"noEmitOnError": false,
"outDir": "./scripts/build",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"exclude": [
"node_modules",
"wwwroot"
],
"include": [
"./scripts/**/*"
]
}