# @tenrok/vue-intellisense > A CLI tool to help enabling IntelliSense on your Vue components Latest version **1.0.3** (published 2023-10-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @tenrok/vue-intellisense pnpm add @tenrok/vue-intellisense yarn add @tenrok/vue-intellisense bun add @tenrok/vue-intellisense ``` Provides the command `vue-int`. ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2023-10-11 | | First published | 2023-10-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM | | Node | >=14.19 | | Dependencies | 8 | | Unpacked size | 9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 59 | | Author | Luca Ban - Mesqueeb | | Maintainers | solodyagin | | Keywords | vue-intellisense, vue-autocomplete, vue-styleguidist, vetur, node, cli | ## Links - npm: https://www.npmjs.com/package/@tenrok/vue-intellisense - Repository: https://github.com/CyCraft/vue-intellisense - Homepage: https://github.com/CyCraft/vue-intellisense#readme - Issues: https://github.com/CyCraft/vue-intellisense/issues - npm.io page: https://npm.io/package/@tenrok/vue-intellisense ## Dependencies (8) - [ora](https://npm.io/package/ora.md) ^6.1.2 - [meow](https://npm.io/package/meow.md) ^10.1.3 - [chalk](https://npm.io/package/chalk.md) ^5.0.1 - [is-what](https://npm.io/package/is-what.md) ^4.1.7 - [log-symbols](https://npm.io/package/log-symbols.md) ^5.1.0 - [case-anything](https://npm.io/package/case-anything.md) ^2.1.10 - [vue-docgen-api](https://npm.io/package/vue-docgen-api.md) ^4.47.0 - [@tenrok/vue-intellisense-scripts](https://npm.io/package/@tenrok/vue-intellisense-scripts.md) ^1.0.3 ## Alternatives - [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads - [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads - [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads - [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads - [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads ## Recent versions - 1.0.3 (latest) — 2023-10-11 ## README # Vue IntelliSense Total Downloads Latest Stable Version > A CLI tool to help enabling IntelliSense on your Vue components ```shell npm i -D @tenrok/vue-intellisense # or globally npm i -g @tenrok/vue-intellisense ``` ## Usage You'll need VSCode and Vetur installed. Vetur has a feature to get IntelliSense for your Vue components, however, you need to provide a bunch of config files for this. The Vue IntelliSense CLI generates the required files with zero-config required! ### TLDR; Generate the required Vetur files for all your Vue components: ```shell vue-int --input /src/components --output vetur --recursive ``` Then add this to your package.json: ```json { "vetur": { "tags": "vetur/tags.json", "attributes": "vetur/attributes.json" } } ``` That's it! 🎉 ### Motivation Check out the [blog post](https://medium.com/@lucaban/vue-intellisense-in-vscode-33cf8860e092)! ### CLI Manual ``` Usage $ vue-int --input --output Options --output, -o A folder to save the generated files. --input, -i Either a Vue file, or a folder with vue components. In case it's a folder, it will not care about nested folders. --recursive, -r consider all vue files in all nested folders as well. --alias, -a List files contain aliases config. Examples # target a specific Vue file to generate IntelliSense for $ vue-int --output 'vetur' --input 'src/components/MyButton.vue' # target all files in a folder - without nested folders $ vue-int --output 'vetur' --input 'src/components' # target all files in a folder - with nested folders $ vue-int --output 'vetur' --input 'src/components' --recursive # target all files in a folder - with nested folders and and using alias for import $ vue-int --output 'vetur' --input 'src/components' --recursive --alias alias.config.js other-alias.config.js # support nested object inside config file like: { resolve: { alias: { "@components": "/src/components" } } } $ vue-int --output 'vetur' --input 'src/components' --recursive --alias webpack.config.js#resolve#alias other-alias.config.js Exits with code 0 when done or with 1 when an error has occured. ``` ### Alias options If in your component use alias import like below, you have to input alias config file(s). ```js import ComponentA from '@src/componentA.vue' or import scriptA from '@components/scriptA' ``` There are 3 ways to input alias config file(s). All support multiple files #### 1. Using tsconfig or jsconfig file ```shell vue-int --output 'vetur' --input 'src/components' --alias tsconfig.json other.jsconfig.json ``` ```json // @file /home/user/project-dir/tsconfig.json { "compilerOptions": { "baseUrl": ".", // default = '.' "paths": { "@/*": ["./*"], "@": ["./index.ts", "./index.vue"], "@src/*": ["./src/*"], "@src": ["./src/index.ts", "./src/index.vue"], "@components/*": ["./src/components/*"], "@components": ["./src/components/index.ts", "./src/components/index.vue"] } } } ``` #### 2. Using nested alias file ```shell vue-int --output 'vetur' --input 'src/components' --alias alias.config.js#resolve#alias other.alias.config.js#nested#alias ``` ```js // @file /home/user/project-dir/alias.config.js const path = require('path') module.exports = { resolve: { alias: { // <= this is nested #resolve#alias '@': path.resolve(__dirname, '.'), '@src': path.resolve(__dirname, './src'), '@views': path.resolve(__dirname, './src/views'), '@components': path.resolve(__dirname, './src/components'), }, }, } ``` #### 3. Using non-nested alias file ```shell vue-int --output 'vetur' --input 'src/components' --alias alias.config.js other.alias.config.js ``` ```js // @file /home/user/project-dir/alias.config.js const path = require('path') module.exports = { // <= this is non-nested '@': path.resolve(__dirname, '.'), '@src': path.resolve(__dirname, './src'), '@views': path.resolve(__dirname, './src/views'), '@components': path.resolve(__dirname, './src/components'), } ``` ### Contributing Any contribution welcome! Would love for this to work with other code editors as well! --- _Source: https://npm.io/package/@tenrok/vue-intellisense · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._