Exploring the World of ES6 Modules, VueJS, and TypeScript

In my pursuit of creating a simplistic setup, I aim to incorporate the features mentioned above. In the realm of JavaScript code, below snippet plays a crucial role:

<script type="module" src="./myapp.js"></script>

This script is responsible for loading the myapp.js module. Within myapp.js, I intend to craft a Vue component utilizing TypeScript (myapp.ts) and then transpile it into JavaScript. However, achieving type information within the .ts code demands importing Vue typings through this method:

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

Upon transpilation, thanks to my tsconfig.settings, the resulting JavaScript retains an es2015 module syntax as such:

import Vue from 'vue';

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
});

However, browsers tend to have issues with this named import format.

The inquiry ensues: How can one possibly import typings without resorting to the aforementioned statement? Despite attempts at utilizing /// syntax, the types remained elusive. Could this be due to the explicit exportation of types, necessitating their import via the traditional import syntax?

Is there a workaround for obtaining typings sans importation? Can the named import be used exclusively for typings retrieval while excluding that line from transpilation? Perhaps, is there an alternative approach to achieve this objective without delving into webpack or similar configurations?

Thank you, John.

Answer №1

If you want to create a simple Vue application, all you need to do is include the vue.min.js file using a script tag. There's no requirement to use import Vue.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

After that, you can bring in your modules like this:

<script type="module" src="mymodule.js"></script>
<script type="module" src="app.js"></script>

Just to clarify, this is not related to typings but rather importing the essential Vue code needed for creating Vue components. Typings are not necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript is requesting an index signature for a nested object that has been validated by Zod and is being received from an API request

This project uses Typescript 4.4.4, Next.js 11.1.2, and Zod 3.9.3. Typescript is throwing an error that says: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type <Review Type> ...

Switch up row values in an array and transform them into an object using SheetJS

I am struggling to format an array where each "Working Day" is represented as an object with specific details like index and start/end date. I need help manipulating the JSON data to achieve the desired structure. The package I'm currently using is: ...

Concealing a paragraph by utilizing v-if within vuex, while also placing it inside a designated tab

I have a store with an array that I'm looping through to create individual pages with shared content. Each page has a button that hides a paragraph. How can I ensure that the paragraph is only hidden on the first page and not on the others? I want the ...

Combining numerous interfaces into a unified interface in Typescript

I'm struggling to comprehend interfaces in Typescript, as I am facing difficulty in getting them to function according to my requirements. interface RequestData { [key: string]: number | string | File; } function makeRequest(data: RequestData) { ...

Stop the bootstrap modal from getting displaced when a dropdown list is displayed

Incorporating Bootstrap's modal to showcase a dropdown menu containing an extensive list of countries, I encountered a problem where the menu extended beyond the window size. It is important to note that this issue arose while developing a browser ext ...

Unable to assign default value to v-text-field

There is a strange race condition causing an issue with loading the default value into the text field (not the text area). The default value is a string taken from i18n and a custom filter, but the custom filter does not display on the initial load of the ...

Instructions for adding a class when a li is clicked and replacing the previous class on any other li in Vue 2

Even though I successfully used jQuery within a Vue method to achieve this task, I am still searching for a pure Vue solution. My goal is to remove a class from one list item and then add the same class to the clicked list item. Below is the code snippet w ...

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

The object might be undefined; TypeScript; Object

Why is it that the object may be undefined, even though it is hard-coded in my file as a constant that never changes? I've tried using ts-ignore without success. const expressConfig = { app: { PORT: 3000, standardResponse: `Server ...

Customizable parameters in a React component

I am encountering two issues with the code provided below: interface MyForm { age: number; email: string; name: string; } function Form< T, ComponentProps extends { name: string; onChange: (event: React.ChangeEvent) => void; } &g ...

Tips on Identifying the Category

I am currently studying TypeScript. Recently, I have been using Axios to fetch API data, and then I stored the returned value in a useEffect hook. However, when trying to display it on the screen, I encountered an error stating that there is no 'name ...

Why is `type T1 = undefined & {}` never used in TypeScript?

After doing some research in the TypeScript documentation, I discovered that NonNullable is a type that excludes null or undefined values. In the docs, it shows that type NonNullable<T> = T & {}; I am curious as to why undefined & {} always ...

Creating a dynamic webpage using the MVC design pattern within a Docker container

I am facing a challenge with my dotnet core application that has authorization. Due to company policy restrictions, Bearer tokens cannot be stored on the front-end. To work around this, I want to utilize an MVC Controller. However, the application is built ...

Tips for transforming or changing Partial<T> into T

I have a variable named Partial<T> in my coding project. returnPartial(): Partial<T> {} proceed(param T) {} //<-- the provided input parameter will always be of type T in this function and cannot be changed let object = this.returnPartial( ...

Ensure the presence of a value in an array using Angular

I need to check if any of the "cuesData" have values or lengths greater than 0. However, in my current code, I can only evaluate the first array and not the rest. https://i.sstatic.net/bMpvg.jpg TS checkValues(values) { const result = Object.values ...

Linking a variable in typescript to a translation service

I am attempting to bind a TypeScript variable to the translate service in a similar way as binding in HTML markup, which is functioning correctly. Here's what I have attempted so far: ngOnInit() { this.customTranslateService.get("mainLayout.user ...

Drizzle ORM retrieve unique string that is not a database column

I'm working with a SQL query that looks like this: SELECT * FROM ( SELECT 'car' AS type, model FROM car UNION SELECT 'truck' AS type, model FROM trucks ) vehicles; In Drizzle, I'm trying to replicate the 'car ...

Is it feasible in Angular2 to add CSS to a component using a service?

I have a component named A containing 5 images. Out of the 5, only one image is in color and clickable, while the remaining 4 are greyed out using the CSS class below: .not_opened{ -webkit-filter: grayscale(85%); } The greyscale images are not clickabl ...

Leveraging Vue.js's capabilities with an external setup file

Is it feasible for a Vue App to access an external configuration file? I envision a setup where I deploy the application along with the config file; then, I should be able to modify the configuration in the external file without needing to rebuild the enti ...

Typescript issue: The function 'forEach' is not applicable for type 'string'

Whenever I try to use the forEach() method, an error appears in my terminal. [ts] Property 'forEach' does not exist on type 'string'. Although my application functions properly in the browser, I want to eliminate these errors from the ...