eco-vue-js

0.12.24 verified Mon Apr 27 auth: no javascript

A Vue 3 component library with Tailwind CSS integration, currently at v0.12.24. Ships TypeScript definitions. Provides reusable UI components like buttons, lists, tabs, and icons. Active development with frequent releases (multiple per month). Differentiators include automatic Tailwind preset support and Vue 3 composition API. Requires Vue >=3.5.30 and @tanstack/vue-query >=5.92.9 as peer dependencies. The library is not yet stable (pre-1.0) and may have breaking changes between minor versions.

Common errors

error Module not found: Error: Can't resolve 'eco-vue-js' ↓

cause Barrel import does not exist; all imports must be explicit paths.

fix

Import specific component: import WButton from 'eco-vue-js/dist/components/Button/WButton.vue'

error Failed to resolve component: WButton ↓

cause Component not registered locally or globally.

fix

Ensure component is imported and included in components option or globally registered.

error Cannot find module 'eco-vue-js/tailwind-base' ↓

cause Missing or misconfigured Tailwind preset import.

fix

Import from 'eco-vue-js/tailwind-base' (not from dist). Ensure package is installed.

Warnings

breaking Pre-1.0: breaking changes may occur in minor versions. Pin to exact version or use lockfile. ↓

fix Specify exact version in package.json: eco-vue-js@0.12.24

deprecated Some older components may have been removed or renamed without notice; check changelog before upgrading. ↓

fix Review release notes for component deprecations. Use codemod if provided.

gotcha Imports require full paths to .vue files; barrel exports are not available. ↓

fix Use exact path: 'eco-vue-js/dist/components/Button/WButton.vue' instead of 'eco-vue-js'.

gotcha Icons are imported as Vue components, not raw SVGs. Path must include '/dist/assets/icons/'. ↓

fix Import as 'eco-vue-js/dist/assets/icons/IconCheck'.

Install

npm install eco-vue-js

yarn add eco-vue-js

pnpm add eco-vue-js

Imports

WButton
wrong
```
import WButton from 'eco-vue-js'
```
correct
```
import WButton from 'eco-vue-js/dist/components/Button/WButton.vue'
```
Components are not exported as a barrel; each component must be imported from its specific path. TypeScript definitions are included.

IconCheck

wrong

import IconCheck from 'eco-vue-js/dist/icons/IconCheck'

correct

import IconCheck from 'eco-vue-js/dist/assets/icons/IconCheck'

Icons are Vue components, not raw SVGs. Path must include '/dist/assets/'.

tailwindBase

wrong

import tailwindBase from 'eco-vue-js/dist/tailwind-base'

correct

import tailwindBase from 'eco-vue-js/tailwind-base'

The preset is directly importable from the package root. No folder nesting.

Quickstart

Tailwind preset setup and basic usage of the WButton component in a Vue 3 app.

// tailwind.config.js
import tailwindBase from 'eco-vue-js/tailwind-base'

export default {
  presets: [tailwindBase],
  content: [
    ...tailwindBase.content,
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
}

// App.vue
<template>
  <WButton>Click me</WButton>
</template>

<script setup>
import WButton from 'eco-vue-js/dist/components/Button/WButton.vue'
</script>