AgnosticUI / agnosticui

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
https://agnosticui.com
Apache License 2.0
723 stars 47 forks source link

Unable to get agnostic-vue working with default settings #262

Open nautilebleu opened 11 months ago

nautilebleu commented 11 months ago

Describe the bug

I create a project with vue-cli, with the defaults Vue3 settings

To Reproduce

$ vue create test-agno
$ cd test-agno
$ yarn add agnostic-vue

Then follow the setup guide to add a button

// in App.vue

<template>
  <button></button>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

import 'agnostic-vue/dist/common.min.css'
import 'agnostic-vue/dist/index.css'
import { Button } from 'agnostic-vue'

export default defineComponent({
  name: 'App',
  components: {
    Button,
    HelloWorld
  }
})
</script>

Expected behavior

The button should appears

Screenshots

Capture d’écran 2023-10-05 à 16 31 21

Versions

{
  "name": "test-agno",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "agnostic-vue": "^1.1.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "webpack": "^5.88.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  }
}

I don't really understand why the basic install ends up with not functional code ? It miss some configuration I guess ?

Issues with pull requests are deeply appreciated! But sometimes it's worth discussing first so the implementation works with AgnosticUI guidelines