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

Angular is notifying that an unused expression was found where it was expecting an assignment or function call

The identifier 'id' is not recognized within the 'never' type in Angular

Having trouble locating the bootstrap import statement

Encountering a 404 (Not Found) error while trying to access a null resource in Angular at http://localhost

Angular routing is showing an undefined ID from the snapshot

Retrieve the text value of a selected option in a v-select component

Problem with Clerk's authentication() functionality

OnDrop event in React is failing to trigger

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

Guide to creating JSDoc for a TouchEvent handler

MySQL integration with .NET Core

Control the transparency of the initial parent div that includes an *ngFor loop

Add Firebase Data to Dropdown

The ".splice()" method continuously removes the final element from an array

Can Typescript Be Integrated into an AngularJS Application?

Bootstrap form validation issues

What is the best way to implement an onChange handler for React-Select using TypeScript?

Prevent Ionic 2 hardware back button from triggering default action

Error encountered while running a mounted hook in Vue.js that was not properly handled