VueTemplateOrganizer

VueTemplateOrganizer is a tool that allows you to configure the sorting of template blocks in Vue Single File Components (SFCs).

Features

• Configurable Sorting: Customize the sorting of template blocks to fit your specific needs.
• Support for Vue SFCs: Use VueTemplateOrganizer with traditional Vue Single File Components.

Not supported yet

• Global install: There is a known issue with path regarding global installation

Getting Started

Follow these steps to get started with VueTemplateOrganizer in your project.

Installation

npm install @derkatzelp/vuetemplateorganizer --save-dev

Usage

Standard usage (uses cwd + vueFolderPath from config)

npx tmp-organizer

Mit einem benutzerdefinierten Projekt-Root-Pfad (überschreibt vueFolderPath aus der config)

npx tmp-organizer --root /path/to/your/project

Ohne Installation: Bash-Variable

npx -p @derkatzelp/vuetemplateorganizer tmp-organizer --root "${PWD}"

Ohne Installation: pwd Command Substitution

npx -p @derkatzelp/vuetemplateorganizer tmp-organizer --root "$(pwd)"

Ohne Installation: Relativer Pfad

npx -p @derkatzelp/vuetemplateorganizer tmp-organizer --root .

Configuration

You can customize the sorting behavior by adjusting the configuration in config.tmporg.json and sorting.tmporg.json.
VueTemplateOrganizer will sort all properties by this given order.

Config

// config.tmporg.json
{
  "showLogFiles": true,
  "showLogFolders": false,
  "sortVueFiles": true,
  "vueFolderPath": "./src/"
}

Sorting

// sorting.tmporg.json
[
  "v-if",
  "v-else-if",
  "v-else",
  "v-show",
  "v-for",
  "v-model",
  "v-bind",
  "v-on",
  "v-html",
  "v-text",
  "v-pre",
  "v-once",
  "v-cloak",
  "id",
  ":id",
  "class",
  "style",
  "type",
  "name",
  "value",
  "href",
  "src",
  "alt",
  "title",
  "placeholder",
  "autocomplete",
  "required",
  "disabled",
  "readonly",
  "checked",
  "selected",
  "multiple",
  "pattern",
  "min",
  "max",
  "step",
  "rows",
  "cols",
  "for",
  "action",
  "method",
  "target",
  "rel",
  "role",
  "aria-*",
  "data-*",
  ":*",
  ":is",
  ":class",
  ":customProp",
  "@*",
  "@click",
  "@input",
  "@change",
  "@submit",
  "slot",
  "slot-scope",
  "ref",
  "key",
  "transition",
  "transition-group",
  "is",
  "inline-template",
  "custom-*"
]

Options

Key	Values	Default	Description
showLogFiles	Boolean	true	Enables or disables log report of touched Files
showLogFolders	Boolean	true	Enables or disables log report of touched Folders
sortVueFiles	Boolean	true	Enables or disables sorting of Vue SFC Files
vueFolderPath	String	./src/	Specifies the path to Vue SFC Files (subfolders included)

CLI Arguments

Argument	Type	Description
--root <path>	String	Overrides the project root path. If provided, vueFolderPath from the config will not be applied. Accepts both absolute and relative paths.

Examples

Before using VueTemplateOrganizer

<template>
  <h1>Test Vue File for Vue Template Organizer</h1>
  <CustomComp class="class1" @click="testfnc" :id="comp1Id" />
  <CustomComp2 @click="testfnc" />
  <p class="par">Just a simple Test</p>
  <label for="txtinput">Your input here</label>
  <input type="text" class="input-c" id="txtinput" ref="myRef" />
</template>

After using VueTemplateOrganizer

<template>
  <h1>Test Vue File for Vue Template Organizer</h1>
  <CustomComp :id="comp1Id" class="class1" @click="testfnc"></CustomComp>
  <CustomComp2 @click="testfnc"></CustomComp2>
  <p class="par">Just a simple Test</p>
  <label for="txtinput">Your input here</label>
  <input id="txtinput" class="input-c" type="text" ref="myRef" />
</template>

Dependencies

VueTemplateOrganizer relies on the following external libraries:

• dom-serializer - For DOM element serialization
• htmlparser2 - For parsing HTML/Vue templates

Contributing

If you'd like to contribute to VueTemplateOrganizer, please contact me.

License

This project is licensed under the MIT License.

Acknowledgments

Special thanks to:

• The maintainers of dom-serializer and htmlparser2 for providing robust parsing tools
• The Vue.js community for inspiration and support