Vue example doesn't work out of the box
Hi! I'm trying out the Deno Vue example from the docs, but the types don't work out of the box.
What can I do to make this work? This is my first time giving Deno a shot.
This is while the Vite dev server is running, so dependencies have been fetched
8 Replies
Hello! I'm glad to hear you're giving Deno a try with Vue. 🦕
If you're encountering issues with types not working out of the box, there are a few things you can check and try:
1. Ensure all dependencies are correctly imported: Make sure that all the necessary dependencies are imported with their full URLs and that they include the
.ts extension if they are TypeScript modules. Deno requires explicit specifiers, so this is a common source of issues.
2. Check for TypeScript configuration: If there's a TypeScript configuration file (tsconfig.json), ensure it's correctly set up and that Deno is using it by specifying the --config=path/to/file flag when running your commands.
3. Use triple-slash directives: The documentation mentions that you can use triple-slash directives to couple the library settings with the code itself. This can help Deno understand which type definitions to apply to your script. For example, you might need to add something like this at the top of your entry point file:
This instructs Deno to apply the built-in Deno type definitions for a window context.
4. Check for any type declaration files: If you have .d.ts files that provide types for your JavaScript modules, make sure they are correctly referenced either through triple-slash directives or included in your TypeScript configuration file under the compilerOptions.types array.
5. Run deno cache: Sometimes running deno cache on your entry file can help download and cache the dependencies with their type definitions, which might resolve some type issues.
6. Look for any available type hints: Some modules might provide compiler hints using @ts-types comments to specify which types should beapplied to the module. Check if the Vue-related modules you're using have such hints and follow them accordingly.
If you've tried these steps and are still facing issues, could you provide more details about the specific error messages you're encountering? This will help in diagnosing the problem further. Remember, Deno is quite strict about module specifiers and types, so it's important to ensure everything is correctly referenced and imported.
Up, if anyone has an idea on how to get this working
Just to make sure it was done properly did you copy and paste
Yes. My steps are as follows (just retried today):
-
deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest
- Enter project name, select deno-vue, TypeScript
- cd vite-project
- deno task dev: vite runs OK
- code .
- Open src/main.ts -> The two type errors above
Attempted fixes:
- deno add npm:vue npm:vite npm:@vitejs/plugin-vue: This fixes import { createApp } from "vue";, but not import App from "./App.vue"It doesn't seem to be exactly the same issue. My attempt fully works at runtime, but typechecking doesn't when it comes to importing the .vue file
Might need to manually import types