CLI to analyze a website and detect Vue and its ecosystem ✨
Discover Vue websites in your browser using the Vue Telescope Chrome / Firefox / Edge extension 💚
npm i -g vue-telescope-analyzer
vta [url]
# Example
vta https://nuxt.comIt 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)