Combining vue with deno and vscode: A guide to seamless development integration

How can I set up Visual Studio Code for a Vue project using Deno?

Important note - the issues mentioned here only pertain to highlighting in VSCode, as the builds, development, and scripts are functioning correctly!

Deno + Vue is an appealing choice! You can develop APIs and UIs within the same repository and easily share models, types, or validators between them.

Key points from my exploration:

  1. My focus in this article is on resolving the highlighting issue in vscode.

  2. I suspect that *.vue files in vscode require the Volar extension, which relies on TypeScript LSP rather than Deno's, posing a main challenge.

  3. When using Deno's LSP, it struggles to understand SingleFileComponent syntax.

I've attempted separate configurations for TypeScript and Deno, syncing their aliases, imports, and node_modules successfully. However, I believe there may be more robust and standardized solutions available.

typescriptvue.jsvisual-studio-codevitedeno

Answer №1

my typical solution approach:

  • vite.config.mts containing all necessary npm:* imports
  • deno.json with aliases in imports to mirror original npm package names

and an unconventional twist:

  • .vscode/settings.json configured to enable deno specifically for the API
  • tsconfig.json defining types for projects following standard vue-vite-node-vscode setup...
  • creation of a dev-hack folder with its own package.json importing all modules via npm
  • update tsconfig.json (compilerOptions.typeRoots[) to include path to dev-hack/node_modules

Essentially, aside from the API (if applicable), all files are handled by TypeScript in Visual Studio Code using tsconfig.json that references dev-hack/node_modules (with node_modules being ignored in .gitignore)... solely for syntax highlighting purposes!

The actual build/serve/dev processes will function as expected without TypeScript configurations mentioned earlier, instead relying on deno+vite as outlined in the documentation.

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

Explore the possibilities of Vue by searching through an array of APIs in

As a newcomer to Vuejs, I am currently working on a web app that retrieves images from the Flickr API and stores them in an array. I want to implement a basic search functionality that allows users to filter images based on the keyword entered, but I am un ...

arraysjsonvue.js

Managing user sessions in Laravel and Vue to optimize shopping cart functionality

I am currently developing a Laravel Vue application for a shop. Both the frontend and backend are hosted on the same server. I have decided not to include any authentication features like registration, but I still want to create a session for the user when ...

laravelvue.jssessioncookiesaxios

New data field is created with AngularFire2 update instead of updating existing field

I am facing an issue with updating a Firestore model in Angular 6. The model consists of a profile name and a list of hashtags. The "name" is stored as the value of a document field, while the "hashtags" are stored as keys in an object. However, every time ...

javascriptangulartypescriptgoogle-cloud-firestoreangularfire2

having difficulty executing npm installations within Laravel Vue project

When trying to execute npm install for my Laravel Vue project, I encountered the following errors: gyp verb find Python Python is not set from command line or npm configuration gyp verb find Python Python is not set from environment variable PYTHON gyp ver ...

laravelvue.jsnpm

Displaying elements in a V-For loop depending on a particular IDX

I have a situation where I want to display only the first element in an Array within a component. However, since the length of the array is 1, it's causing two renders. <template> <div> <DataSolutions v-for="(rs, idx) i ...

vue.jsvuejs2

Error: The specified function (0, _ignore.getFileExtensions) is not a valid function

Using Vue CLI version 3.5.5 After installing vue-cli and creating a new project with the create command, an error occurred at the end of the process. What steps should be taken to resolve this issue? ? Please select a preset: Manually choose features ? ...

vue.jsvue-clivue-cli-3

How can I ensure my outcome is not in lowercase?

Is there a way to replace "man and wife" with their corresponding codes, e.g., husband = M and wife = F? I attempted using if and if-else but had to incorporate it within a div, which resulted in my output being lowercase. This is the code I have: <tem ...

vue.jsvuejs3

Angular2's integration of backend API calls

My backend calls are functioning correctly, but I'm encountering an issue with promises. I am unable to retrieve the data from the first promise in order to make the second call. Any insights on where I might be going wrong? login() { if (thi ...

typescriptangular

Can you explain the distinction between the GenerateSW and InjectManifest choices within the vue ui pwd configuration?

Currently utilizing @vue/cli for building a vue project. I have initiated vue ui to access the vue UI and am in the process of customizing various available options. https://i.sstatic.net/h77AE.png Within Configuration -> PWA, I have come across the a ...

javascriptnode.jsvue.js

How can I interact with a v-dialog component within a child component in Vue.js using Vuetify?

Exploring Vue.js for the first time and hoping to display a login dialog upon button click. To maintain cleanliness in my code, I shifted the dialog to a child component within a parent component with nested LoginDialog. Below are snippets of the parent co ...

javascriptvue.jsdialogvuetify.js

Change the Angular Material 2 theme from light to dark with a simple click

I'm working on an Angular 2 Material project and I want to be able to switch the theme from dark to light with a single click of a button. Can anyone help me figure out how to achieve this? Any tips or advice would be greatly appreciated! ...

angulartypescriptmaterial-designangular-material2

Vue component, store data for future use

I need to find a way to store data in a vue component for future use. Data function, example 1 data: function () { return { username: '', phoneNumber: '', } } Saving method var x = JSON.stringify(th ...

vue.jscomponents

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

I have a JavaScript code in my TypeScript file. It retrieves the attribute from a span element when it is clicked. I want to store this attribute's value in a TypeScript variable and then call a TypeScript function. Take a look at my ngOnInit method, ...

javascriptangulartypescriptionic-frameworkionic2

Unlock specific elements within the "sub-category" of a combined collection

If my union type is structured like this: type StateUpdate = { key: 'surname', value: string } | { key : 'age', value: number }; This setup is convenient because it allows me to determine the type of the value based on the key. Howev ...

typescript

What is the procedure for accessing a namespace when declaring it globally?

Website Project Background Currently, I am working on a simple website where users can update their pictures. To achieve this functionality, I am utilizing the Multer library along with Express in Typescript. Encountered Issue I am facing a challenge re ...

node.jstypescriptexpressmulter

How do I see all the implementations of a Vue 3 component when using Volar in VS Code?

Is there a more efficient method for identifying all the instances of a <script setup> component used in various parts of my application? Neither the Go to Implementations nor Go to References options seem to work, so currently I am resorting to man ...

vue.jsvisual-studio-codevscode-extensionsvolar

Axios fails to properly assign data

I've been struggling to assign data from an axios response because it seems like the "this" keyword is only accessible within the scope of the axios function. Despite trying various iterations of similar code found in other posts, nothing seems to be ...

vue.jsaxios

Issue with Axios: XSRF token omission in headers communication

I am currently in the process of integrating a Vue JS application (Quasar framework) with an API. The API has been developed using Laravel and is utilizing sanctum for CSRF protection. Upon sending a request to the sanctum endpoint https://someweburl.com/ ...

laravelvue.jsaxioscsrflaravel-sanctum

The null error occurs when rendering with React's state array

When I try to call an API that emits JSON, I am encountering an issue. I call the promise API function in componentDidMount, set the state, and then call it in the render method, but it always returns a null error. I need assistance, please. Interface fo ...

javascriptjsonreactjstypescript

Tips for verifying that parameters possess designated characteristics in TypeScript

How can I ensure that data2 and data3 work correctly, while data1 triggers an error if the data type is not specified as shown in the code below? I need to validate that when a user enters params like {name: 'aa', age: 20}, it should throw an er ...

typescript