https://github.com/emilydaykin/dev-res

A Vue.js app, styled in Tailwind, to store, add, and delete development resources
https://github.com/emilydaykin/dev-res

tailwindcss vuejs

Last synced: 6 days ago
JSON representation

A Vue.js app, styled in Tailwind, to store, add, and delete development resources

• Host: GitHub
• URL: https://github.com/emilydaykin/dev-res
• Owner: emilydaykin
• Created: 2023-04-28T15:16:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-09T15:29:05.000Z (over 1 year ago)
• Last Synced: 2024-09-09T17:20:22.929Z (2 months ago)
• Topics: tailwindcss, vuejs
• Language: Vue
• Homepage:
• Size: 2.99 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Development Resources App

A responsive web app built with Vue.js and styled with Tailwind that lets users store, add and delete learning, development or technology resources.



  





  





  





  

  



## Project setup

### VueJS app:

1. Install packages &  dependencies: `npm install`

2. Compiles and hot-reloads for development `npm run serve`

3. Compiles and minifies for production: `npm run build`

4. Lints and fixes files `npm run lint`

### Tailwind setup:

1. Install tailwind:

  ```

  npm install -D tailwindcss postcss autoprefixer

  npx tailwindcss init -p

  ```

2. Add content to tailwind config's module.exports

  ```

  module.exports = {

  content: [

    "./index.html",

    "./src/**/*.{vue,js,ts,jsx,tsx}",

  ],

  ```

3. Add tailwind directives to CSS in newly-created stylesheet:

```

// in style.css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

4. Import this stylesheet into the app:

```

// in main.js

import './style.css'

``` 

## Learnings:

- `` allows you to reorganise the DOM (if you have an `absolute`-positioned component for example)

- `provide` and `inject` can be used instead of props to pass data along

  ```javascript

  // $StoredResources.vue

  export default {

    inject: ['resources'],

  }

  // $TheResources.vue

  export default {

    // data() {

    //   return {

    //     storedResources: [

    //       ...

    //     ]

    //   }

    // },

    provide() {

      return {

        resources: this.storedResources, // this provides the resources to all child components

      };

    }

  }

  ```

- (Component names should be more than 1 word long. `Resources.vue` → `TheResources.vue`)

- Slots:

  ```html

  

   // = 

  ```

    - If more than one slot (say *n* slots), slot names must be given to *n-1* slots (the one without the name gets the name "default")

    - One way to name slots(above), but two ways to 'call' the slot:

    ```html

    

    

    // or

    

    ```

- `` "holds onto" the component, so that the data won't be lost when toggling between states (e.g. between the Stored Resources tab and the Add Resource tab)

- How to add opacity to a colour in tailwind: `bg-zinc-800/[.8]`