A Vue project with minimal setup and dependencies for trying out Vetur's features. Also used for creating minimal, reproducible case for Vetur bug reports.
- Install latest version of Vetur
git clone [email protected]:octref/veturpack.git
cd veturpack
yarn install
code .
Try all features below in src/Test.vue
. You can read more about these features in Vetur's documentation: https://vuejs.github.io/vetur/.
- Do an emmet expansion on the html template. For example, type
div
and then tab. - Complete on
<router|
. Because of thevue-router
dependency, you should seerouter-link
. Read more about this feature in Framework Support. yarn add element-ui
, reload the project and complete<el
. You should see all tags from Element UI. Read more about this feature in Framework Support.- Complete on
<foo
. You should see<foo-tag>
. Read more about this feature in Framework Support. - Hover over any tags such as
<div>
or<router-link>
. You'll see the tag's description. - Because of
"vetur.experimental.templateInterpolationService": true
in.vscode/settings.json
, you should see an error on{{ fo }}
in the template section. Change it tofoo
to fix the error. - Delete the
foo
in{{ foo }}
. Typeb
. You should see completion ofbar
. - In script section, try
_.
. You should see all lodash's methods. - Install another library with types, such as jquery.
yarn add -S jquery && yarn add -D @types/jquery
. After importing it withimport * as $ from 'jquery'
, you should get$.
completions. - Setup eslint-plugin-vue with a
.eslintrc
. Set"vetur.validation.template": false
to turn off Vetur's builtin ESLint linter. You'll get ESLint warnings now. - In
<script>
section, add//@ts-check
. Write some type-unsafe code, such aslet a = 'a'; a = 5
. You'll see an error. - F1 -> Format the document. You can configure the formatters and their settings as well.
- In
.prettierrc.json
, set"singleQuote": true
and format again. - Type
<style scss
and tab to choose a snippet. You should get a SCSS section setup. These snippets are customizable. - Try some CSS completions in the
<style lang="scss">
section. - Make some errors in the Vue file and run vti — you should see all diagnostics printed on CLI.
For a more comprehensive setup, refer to https://github.com/chrisvfritz/vue-enterprise-boilerplate.
MIT