#Contributing

#Setting up your environment

Required software:

• Git>v2.20
• Node.jsLTS
• Yarn

Some of our dependencies use node-gypto build themselves. You don’t need to install node-gyp itself but may require additional tools, especially on windows. See the node-gyp documentation for more details.

Once you have everything installed, clone the repository:

# Using HTTPS
git clone https://github.com/vuetifyjs/vuetify.git

# Using SSH
git clone git@github.com:vuetifyjs/vuetify.git

Then install dependencies and perform an initial build to link all the packages together:

# Navigate to the vuetify folder
cd vuetify

# Install all project dependencies
yarn

# Build the packages
yarn build vuetify
yarn build api

The build process compiles all the Vuetify packages for development and may take a while (grab some ☕). Once the packages are built, you can start developing.

#Vuetify

The Vuetify library is located in packages/vuetify. In packages/vuetify/dev you will find a Playground.vue file; running yarn dev from the project root will start a dev server on localhost:5173 with this file loaded. Test your changes in the Playground.vue file you copied, then paste its contents into your pull request when you’re ready.

You can also test Vuetify in your own project using yarn link:

• Navigate to packages/vuetify
• Run yarn link
• Navigate to your project’s directory
• Run yarn link vuetify

If your project is using vuetify-loader you will have to run yarn build:lib in the vuetify package to see changes, otherwise you can use yarn watch for incremental builds.

<template>
  <v-container>
    <!--  -->
  </v-container>
</template>

<script setup>
  //
</script>

#Documentation

The documentation is located in packages/docs but also uses some files from packages/api-generator. A dev server for the documentation can be started by running yarn dev docs from the project root and will be available on localhost:8080by default.

If you want to see changes from Vuetify in the documentation you need to run yarn build:lib in the vuetify package before starting the documentation server.

#API Generator

All api descriptions are managed via the api-generator package. This package must be built prior to running or building the docs. Descriptions can be updated via the JSON files located in the src/locale/en folder. Some general guidelines to follow when handling api descriptions are:

• en language only.
• Prop names should be formatted using bold markdown eg: prop-name.
• Slot and other code related text should be formatted using code markdown eg: some-slot.
• Description keys should be in camelCase, except for slot keys which should be kebab-case.
• Put keys in alphabetical order.
• Descriptions utilize a hierarchy of generic.json < Source.json < Component.json to reduce duplication. Source can be viewed using the Developer Mode in docs settings.

#Submitting Changes / Pull Requests

First you should create a fork of the vuetify repository to push your changes to. Information on forking repositories can be found in the GitHub documentation.

Then add your fork as a remote in git:

# Using HTTPS
git remote add fork https://github.com/YOUR_USERNAME/vuetify.git

# Using SSH
git remote add fork git@github.com:YOUR_USERNAME/vuetify.git

# Switch to the desired branch
# v3
git switch master
# v2
git switch v2-stable

# Pull down any upstream changes
git pull

# Create a new branch to work on
git switch --create fix/1234-some-issue

#Issue triage

With the size and popularity of Vuetify has come a constant influx of new issues, questions, and feature requests. To organize these requests the Core Teamdeveloped tools to aid not only the triaging of issues, but creating them as well.

The Issuesboard makes heavy use of GitHub’s label system with some light automation, such as adding the triage label to new issues.

#Requesting new features

Pending

#Commit guidelines

All commit messages are required to follow the conventional-changelogstandard using the angular preset. This standard format consists of 2 types of commits:

• With scope: <type>(scope): <subject>

  fix(VSelect): don't close when a detachable child is clicked
  
  fixes #12354
  

• Without scope: <type>: <subject>

  docs: restructure nav components
  
  Moved duplicated functionality in drawer to reduce
  scope of responsibility