feat: Vue 3 migration (#4)

* pinned node version * removed old project files * bumped node version * initial project structure with Vue 3 * export default CarbonBadge * updated README instructions * added logic back for user-defined dark mode prop * added eslint & prettier * linted CarbonBadge component file * got rid of generated texts & styles * linted rest of files * fixed issue of Vue setting boolean to false if not specified as prop * use short form of CarbonBadge tag in README instead
niklashaug · Mar 3, 2024 · f19112b · f19112b
1 parent 363ee79
commit f19112b
Show file tree

Hide file tree

Showing 24 changed files with 2,407 additions and 26,835 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
+};
diff --git a/.gitignore b/.gitignore
@@ -1,21 +1,22 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/extensions.json
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.11.1
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
@@ -12,24 +12,21 @@ npm install vue-carbonbadge
 yarn add vue-carbonbadge
 ```
 
-## How To Use
-**1. Import the package into your main.js file**
-```js
-import CarbonBadge from 'vue-carbonbadge'
-Vue.use(CarbonBadge)
-```
-**2. Use it in your HTML markup**
-```html
-<footer>
-    <CarbonBadge></CarbonBadge>
-</footer>
+## Usage
+```vue
+<template>
+    <CarbonBadge />
+</template>
+
+<script setup>
+    import CarbonBadge from "vue-carbonbadge";
+</script>
 ```
-**3. You're done! 🎉**
 
 ## Customization
 **Toggling dark mode**
 ```html
-<CarbonBadge :dark="true"></CarbonBadge>
+<CarbonBadge :dark="true" />
 ```
 
 If the `dark` property is not specified, dark mode is detected as per user system preferences.
diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue-carbonbadge</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>