berryjam-cli

UI Components Anaylzer for Vue 3 & Nuxt

Scan your Vue.js codebase for component visibility and actionable insights.

Explore the docs »

Quick Start - Community - Support (to Berryjam Discord) - License

Available in: Vue.js (3.X), Nuxt (3.X)

:sparkles: Overview

Berryjam is a Vue.js component analytics tool to scan your project for components to monitor their usage. Component visibility allows for effective team communication and provides opportunities to optimize your source code.

:rocket: Quick Start

Scan with Berryjam CLI - Cloud

First, you will need to create a Berryjam account and workspace. After that, please choose a project you would like to scan. For demonstration purposes, we will be scanning an open-source project called Koel. Clone or download it to a convenient location to get started.

git clone https://github.com/koel/koel.git

Now, login with your Berryjam account on your preferred terminal. You will be prompted to input email and password.

npx berryjam-cli@latest login

Then, run the scan command with Berryjam scan on the project root directory:

npx berryjam-cli@latest scan .

The terminal will prompt you to install Berryjam CLI (latest version). After that, the CLI will prompt you to confirm the workspace you wish to scan to. Once the scan is complete, Berryjam CLI will provide your workspace URL to click on.

Scan with Berryjam CLI - Offline

Because we will be installing and running Berryjam CLI in a single command, please choose a project you would like to scan. For demonstration purposes, we will be scanning an open-source project called Koel. Clone or download it to a convenient location to get started.

git clone https://github.com/koel/koel.git

Now, run the scan command with Berryjam scan on the project root directory:

npx berryjam-cli@latest scan . --local

The terminal will prompt you to install Berryjam CLI (latest version). Once the scan is complete, Berryjam CLI will automatically open a localhost web app. By default, the port is configured for port 3000. If it is unavailable, please change your port with this command.

JSON Output

Berryjam will scan for components in your source code and output a JSON file.

Sample JSON

[
	{
		tag: "Overlay",
		total: 1,
		type: "internal",
		source: {
			filePath: "@/components/ui/Overlay.vue",
			fileProperty: {
				dataLastModified: "",
				lastModified: "",
				created: "",
				createdBy: "",
				updatedBy: "",
			},
		},
		details: [
			{
				source: "/koel-master/resources/assets/js/App.vue",
				rows: [2],
				property: {
					dataLastModified: "",
					lastModified: "",
					created: "",
					createdBy: "",
					updatedBy: "",
				},
				total: 1,
			},
		],
		children: {
			total: 0,
			tags: [],
			source: "",
		},
	},
	{
		tag: "DialogBox",
		total: 1,
		type: "internal",
		source: {
			filePath: "@/components/ui/DialogBox.vue",
			fileProperty: {
				dataLastModified: "",
				lastModified: "",
				created: "",
				createdBy: "",
				updatedBy: "",
			},
		},
		details: [
			{
				source: "/koel-master/resources/assets/js/App.vue",
				rows: [3],
				property: {
					dataLastModified: "",
					lastModified: "",
					created: "",
					createdBy: "",
					updatedBy: "",
				},
				total: 1,
			},
		],
		children: {
			total: 0,
			tags: [],
			source: "",
		},
	},
];

After the scan, an Analytic Dashboard is generated for transparency and insights. Here is a sample Dashboard:

:busts_in_silhouette: Community

• Twitter: Follow our official Twitter account
• Discord: A place where you can get support, feedback or just want to meet and hang out.
• GitHub: If you wish, you may want to request features here too.
• For any other inquiries, you may reach out to us at [e-mail].

:books: License

Berryjam code is licensed under the terms of the Elastic License 2.0 (ELv2), which means you can use it freely inside your organization to protect your applications without any commercial requirements.

You are not allowed to provide Berryjam to third parties as a hosted or managed service without explicit approval.