Vue Telescope Analyzer

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 💚

Installation

npm i -g vue-telescope-analyzer

Usage

vta [url]

# Example
vta https://nuxt.com

It supports multiple frameworks, UI libraries and Vue plugins.

Frameworks

• Nuxt
• Quasar
• Gridsome
• VuePress
• Vue Storefront
• îles
• TresJs

To support a new Vue framework, please look at detectors/frameworks.json.

UI Libraries

• 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 Plugins

• 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.

Nuxt Info

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.

NPM Module

You can use vue-telescope-analyzer locally on your project:

npm install vue-telescope-analyzer # Or yarn add vue-telescope-analyzer

Then 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' }

Contributing

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Update the code right inside src/ or detectors/
4. Test it with ./bin/vta.js https://your-url-to-test
5. If you add a new detector, please add the icon in icons/ (SVG cleaned with SVGOMG)

License

MIT License