What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

Question

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

I've been spending the last couple of days experimenting with my basic ASP.NET Core website set up for Typescript 2.9, but unfortunately, I haven't made much progress. My main goal is to keep the front-end simple, with just single Vue apps on each page and avoid complex build systems or components.

My current tsconfig.json file looks like this:

{
  "compilerOptions": {
    "declaration": true,
    "mapRoot": "/js/",
    "module": "esnext",
    "removeComments": true,
    "sourceMap": true,
    "target": "esnext"
  },
  "compileOnSave": true
}

(I've tried different modules - es6, es5, and none as well)

In my wwwroot/js folder, there's a Site.ts file structured as follows:

import { Vue } from "./types/vue";

var _mixin: any;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {},
    methods: {},
    mounted: function () {
    },
});

Additionally, in the wwwroot/js/types folder, I have 5 d.ts files from Vue, along with vue.js file. Although TypeScript compiles correctly into a js file, when I visit the main page, Chrome displays a "404, file not found /types/vue" error.

This is how the compiled Site.js looks like:

import { Vue } from "./types/vue";
var _mixin;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {},
    methods: {},
    mounted: function () {
    },
});
//# sourceMappingURL=/js/Site.js.map

The HTML code includes this link:

If anyone has any suggestions, please avoid recommending complicated build systems like Webpack. I prefer not to add unnecessary dependencies to my build process.

typescript asp.net-core vue.js

Answer 1

Answer №1

Surprisingly, the process is quite straightforward! Drawing from my experience creating a Vue TodoMVC style app with Require.js, you can adapt these steps to suit your own project.

The most convenient approach is to utilize a loader like Require.js or System.js that doesn't necessitate bundling - all that's required is compiling with TypeScript.

Given my usage of Require.js and Vue, here's a glimpse of my package.json

{
  "name": "vue-tutorial",
  "version": "1.0.0",
  "dependencies": {
    "@types/requirejs": "^2.1.28",
    "vue": "^2.1.4"
  }
}

Next on the list is adding a tsconfig.json

{
    "compilerOptions": {
        "outFile": "./built/app.js",
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "module": "amd",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "lib": [
            "dom", "es2015"
        ],
        "types": [
            "requirejs"
        ]
    },
    "include": [
        "src"
    ]
}

Laying it out:

outFile: TypeScript consolidates your source code into a single file (excluding dependencies).
noImplicitAny, strictNullChecks, noImplicitThis: crucial strict options under --strict.
module: amd: AMD suits Require.js as a module format.
moduleResolution: node: easing TypeScript in picking up .d.ts files from node_modules.
esModuleInterop: modern syntax for importing Vue.
lib: specifies expected standard APIs at runtime.
types: includes .d.ts files for libraries we won't directly import like Require.js.

Now onto our index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello Vue!</title>
</head>

<body>
    <div id="app"></div>

    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f3e4f0f4e8f3e4ebf2c1b3afb2afb4">[email protected]</a>/require.js"></script>
    <script src="./built/app.js"></script>
</body>

</html>

Let's craft our initial component in

src/components/GreetingComponent.ts

:

import Vue from "vue";

export default Vue.extend({
    template: `<div>Hello {{name}}!</div>`,
    props: ["name"],
});

Following that, let's set up an index.ts:

import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";

new Vue({
    el: "#app",
    template: `<greeting-component name="Steve"></greeting-component>`,
    components: {
        GreetingComponent
    }
});

Lastly, create a bootstrapper to import your code in require-config.ts:

require.config({
    paths: {
        // Specify JS library dependencies here.
        // CDN used here, but you can link to your assets.
        "vue": "<![CDATA[https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0b08183d4f5348534c4b">[email protected]</a>/dist/vue]]>",
    }
});
require(["index"]);

To elaborate:

paths directs Require.js on locating Vue and other libraries when imported bare. Customize where Vue is found, omitting the .js extension in the URL.
The require call loads your index module to kickstart your program.

Execute tsc, open index.html, and everything should function seamlessly!

Answer 2

Surprisingly, the process is quite straightforward! Drawing from my experience creating a Vue TodoMVC style app with Require.js, you can adapt these steps to suit your own project.

The most convenient approach is to utilize a loader like Require.js or System.js that doesn't necessitate bundling - all that's required is compiling with TypeScript.

Given my usage of Require.js and Vue, here's a glimpse of my package.json

{
  "name": "vue-tutorial",
  "version": "1.0.0",
  "dependencies": {
    "@types/requirejs": "^2.1.28",
    "vue": "^2.1.4"
  }
}

Next on the list is adding a tsconfig.json

{
    "compilerOptions": {
        "outFile": "./built/app.js",
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "module": "amd",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "lib": [
            "dom", "es2015"
        ],
        "types": [
            "requirejs"
        ]
    },
    "include": [
        "src"
    ]
}

Laying it out:

outFile: TypeScript consolidates your source code into a single file (excluding dependencies).
noImplicitAny, strictNullChecks, noImplicitThis: crucial strict options under --strict.
module: amd: AMD suits Require.js as a module format.
moduleResolution: node: easing TypeScript in picking up .d.ts files from node_modules.
esModuleInterop: modern syntax for importing Vue.
lib: specifies expected standard APIs at runtime.
types: includes .d.ts files for libraries we won't directly import like Require.js.

Now onto our index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello Vue!</title>
</head>

<body>
    <div id="app"></div>

    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f3e4f0f4e8f3e4ebf2c1b3afb2afb4">[email protected]</a>/require.js"></script>
    <script src="./built/app.js"></script>
</body>

</html>

Let's craft our initial component in

src/components/GreetingComponent.ts

:

import Vue from "vue";

export default Vue.extend({
    template: `<div>Hello {{name}}!</div>`,
    props: ["name"],
});

Following that, let's set up an index.ts:

import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";

new Vue({
    el: "#app",
    template: `<greeting-component name="Steve"></greeting-component>`,
    components: {
        GreetingComponent
    }
});

Lastly, create a bootstrapper to import your code in require-config.ts:

require.config({
    paths: {
        // Specify JS library dependencies here.
        // CDN used here, but you can link to your assets.
        "vue": "<![CDATA[https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0b08183d4f5348534c4b">[email protected]</a>/dist/vue]]>",
    }
});
require(["index"]);

To elaborate:

paths directs Require.js on locating Vue and other libraries when imported bare. Customize where Vue is found, omitting the .js extension in the URL.
The require call loads your index module to kickstart your program.

Execute tsc, open index.html, and everything should function seamlessly!

Answer 3

Answer №2

My experience with using Vue3 is as follows:

To begin, I added a file named vue.d.ts

import Vue from "vue"
export = Vue;
export as namespace Vue;

Next, I made adjustments to the settings in my tsconfig.json

{
  "compilerOptions": {
    "module": "UMD", 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
  }
}

Here is how my package.json looks like:

{
  "name": "test",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.2"
  }
}

In my test.ts, I have implemented the following code:

const App = {
    data() {
        return {
            counter: 0,
        };
    },
};

Vue.createApp(App).mount("#app");

The resulting test.js file is as shown below:

var App = {
    data: function () {
        return {
            counter: 0
        };
    }
};
Vue.createApp(App).mount("#app");

All of this was done without encountering any errors.

Answer 4

My experience with using Vue3 is as follows:

To begin, I added a file named vue.d.ts

import Vue from "vue"
export = Vue;
export as namespace Vue;

Next, I made adjustments to the settings in my tsconfig.json

{
  "compilerOptions": {
    "module": "UMD", 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
  }
}

Here is how my package.json looks like:

{
  "name": "test",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.2"
  }
}

In my test.ts, I have implemented the following code:

const App = {
    data() {
        return {
            counter: 0,
        };
    },
};

Vue.createApp(App).mount("#app");

The resulting test.js file is as shown below:

var App = {
    data: function () {
        return {
            counter: 0
        };
    }
};
Vue.createApp(App).mount("#app");

All of this was done without encountering any errors.

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

Answer №1

Answer №2

Similar questions

Could the repeated utilization of BehaviorSubject within Angular services indicate a cause for concern?

Struggling to delete event listeners in TypeScript using object-oriented programming with JavaScript

Retrieving Vue component properties as a data type

Guidelines for establishing authentic headers on a SignalR connection

A guide to declaring MongoDB models in TypeScript across multiple files

"TypeScript function returning a boolean value upon completion of a resolved promise

The process of removing and appending a child element using WebDriverIO

Using regular expressions, replace all instances of " " with ' ' based on certain conditions

Developing J2EE servlets with Angular for HTTP POST requests

Issue: NG04002 encountered post migration from Angular to Angular Universal

Can I create a unique Generic for every Mapped Type in Typescript?

Issue with TypeORM findOne method causing unexpected output

Definition of type instantiation in TypeScript

Steps for specifying the required type of an Object literal in Typescript

Error: Unrecognized action type in Vuex

Having trouble showing the fa-folders icon in Vuetify?

Tips on making a forced call to `super.ngOnDestroy`

Identifying the specific type within a union of types using a discriminator

Retrieve the non-empty attributes of a JSON object

Sending the id from a component to a service in Angular