Haehnchen/idea-vuejs-plugin

Vue.js 3 Toolbox Plugin for PhpStorm / Intellij

IntelliJ IDEA / PhpStorm Vue.js Toolbox Plugin

Key	Value
Plugin Url	https://plugins.jetbrains.com/plugin/23832-vue-js-toolbox
ID	de.espend.idea.vuejs
Documentation	https://espend.de/phpstorm/plugin/vuejs-toolbox
Changelog	CHANGELOG

Install

• Install the plugin by going to Settings -> Plugins -> Browse repositories and then search for Vue.js Toolbox.

Component Usages

Navigation to component usages

<-- ButtonCounter.vue -->
<template/>

Target

<-- AnotherFile.vue -->
<script>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <ButtonCounter />
  <button-counter />
</template>

Infile navigation via LineMarker

<template>
  <ButtonCounter />
  <button-counter />
</template>

Targets

<script setup>
    import ButtonCounter from './ButtonCounter.vue'
</script>

export default {
  components: {
    ButtonCounter
  }
}

@Component({
  components: {
    ButtonCounter,
  },
})
export default {}

Entrypoint

Linemarker for vue.js targeting its creation

import App from './App.vue'
const app = createApp(App)

import Vue from 'vue'
import App from './App.vue'

const app = new Vue({
    render: (createElement) => createElement(App)
});

import App from './App.vue';
new App().$mount(el);