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 install -g vue-telescope-analyzer # Or yarn global add 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

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

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:

{                                                                                                                17:48:21
  url: 'https://nuxt.com/',
  hostname: 'nuxt.com',
  domain: 'nuxt.com',
  meta: {
    language: 'en',
    title: 'Nuxt: The Intuitive Web Framework',
    description: 'Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful.',
    siteName: '',
    isAdultContent: false
  },
  vueVersion: '3.2.45',
  hasSSR: true,
  isStatic: false,
  framework: {
    slug: 'nuxtjs',
    name: 'Nuxt',
    imgPath: '/framework/nuxt.svg',
    url: 'https://nuxt.com'
  },
  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-algolia',
      name: '@nuxtjs/algolia',
      imgPath: null,
      url: 'https://algolia.nuxtjs.org'
    },
    {
      slug: 'nuxt-image',
      name: '@nuxt/image',
      imgPath: null,
      url: 'https://image.nuxtjs.org'
    }
  ],
  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