CLI to analyze a website and detect Vue and its ecosystem ✨
This module is used by vuetelescope.com to detect Vue and its ecosystem on a website.
You can help the community discover new Vue websites by using the browser extension 💚
npm i -g vue-telescope-analyzervta [url]
# Example
vta https://nuxt.com
It supports multiple frameworks, UI libraries and Vue plugins.
To support a new Vue framework, please look at detectors/frameworks.json.
- Element UI
- Vuetify
- Bootstrap Vue
- TailwindCSS
- Buefy
- Inkline
- Chakra UI Vue
- Oruga
- VueTailwind
- PrimeVue
- iView
- Vue Material
- Vulk
- Arco Design
To support a new UI library, please look at detectors/uis.json.
- Vue Router
- Vuex
- Vue Meta
- Vue Apollo
- Vue Warehouse
- Vue i18n
- Vue Formulate
- Inertia.js
- vee-validate
- Vue Composition API
- Vue Tour
- Pinia
- Harlem
- FormKit
To support a new Vue plugin, please look at detectors/plugins.json.
When Nuxt is detected as a framework, it will also detect:
- If the website is server-rendered (
mode: 'universal') - If the website is static (
nuxt generate)
See detectors/nuxt.meta.json for the detection.
It will also detect the Nuxt modules used, refer to detectors/nuxt.modules.json to support new Nuxt modules.
You can use vue-telescope-analyzer locally on your project:
npm install vue-telescope-analyzer # Or yarn add vue-telescope-analyzerThen you can use the module in your project:
const analyze = require('vue-telescope-analyzer')
analyze('https://nuxt.com')
.then(result => console.log(result))
.catch(error => console.error(error))Result:
{ url: 'https//nuxt.com/',
hostname: 'nuxt.com',
domain: 'nuxt.com',
meta:
{ language: 'en',
title: 'Nuxt: The Intuitive Vue Framework · Nuxt',
description:
'Nuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.',
siteName: 'Nuxt',
isAdultContent: false },
vueVersion: '3.4.21',
hasSSR: true,
isStatic: true,
framework:
{ slug: 'nuxtjs',
name: 'Nuxt',
imgPath: '/framework/nuxt.svg',
url: 'https://nuxt.com',
version: '3.10.3' },
plugins:
[ { slug: 'vue-router',
name: 'vue-router',
imgPath: null,
url: 'https://router.vuejs.org/' } ],
ui:
{ slug: 'tailwind-css',
name: 'Tailwind CSS',
imgPath: '/ui/tailwind.svg',
url: 'https://tailwindcss.com/' },
frameworkModules:
[ { slug: 'nuxt-content',
name: '@nuxt/content',
imgPath: null,
url: 'https://content.nuxtjs.org' },
{ slug: 'nuxtjs-color-mode',
name: '@nuxtjs/color-mode',
imgPath: null,
url: 'https://color-mode.nuxtjs.org' },
{ slug: 'nuxt-ui', name: '@nuxt/ui', imgPath: null, url: 'https://ui.nuxt.com' },
{ slug: 'nuxt-ui-pro',
name: '@nuxt/ui-pro',
imgPath: null,
url: 'https://ui.nuxt.com/pro' } ],
screenshot: '/var/folders/.../00b97a2040a9aeffc8d5c9d855d2643a.jpg' }- Clone this repository
- Install dependencies using
yarn installornpm install - Update the code right inside
src/ordetectors/ - Test it with
./bin/vta.js https://your-url-to-test - If you add a new detector, please add the icon in
icons/(SVG cleaned with SVGOMG)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent