Git Product home page Git Product logo

vite-plugin-vue-devtools's Introduction

Vue DevTools Preview

NPM Version

πŸ’‘ Ideas & Suggestions | πŸ—ΊοΈ Project Roadmap

πŸ“– Introduction

vite-plugin-vue-devtools is a Vite plugin designed to enhance the Vue developer experience.

πŸŽ‰ Features

Pages

The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.

Components

Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).

Assets

Assets tab that shows all your static assets (vite config.publicDir only now) and their information. You can open the asset in the browser or download it.

Timeline

Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.

Routes

Routes tab is a feature integrated with Vue Router, allowing you to view the registered routes and their details.

Pinia

Pinia tab is a feature integrated with Pinia, allowing you to view the registered modules and their details.

Graph

Graph tab provides a graph view that show the relationship between components.

Inspect

Inspect expose the vite-plugin-inspect integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.

Inspector

You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the vite-plugin-vue-inspector)

πŸ“¦ Installation


# vite-plugin-vue-devtools 

pnpm install vite-plugin-vue-devtools -D

πŸ¦„ Usage

Configuration Vite

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
    vue(),
  ],
})

πŸ’‘ Notice

  • Only available in development mode.

  • Only support Vue3.0+.

  • Currently only supports single-instance Vue applications (multi-instance support is coming soon).

  • Doesn't support SSR (If you're using Nuxt, use nuxt/devtools directly).

  • The plugin follows Vue's devtools configuration, so if you have configured the hide option, it will also be applied in this plugin. e.g.

    // This Vue instance will be ignored by the plugin.
    createApp({
      render: () => h(App),
      devtools: {
        hide: true,
      },
    })

πŸ“– Blog Post

🌸 Credits

πŸ“„ License

MIT LICENSE

vite-plugin-vue-devtools's People

Contributors

webfansplz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.