Giter Site home page Giter Site logo

noor's Introduction

Noor! The Vue frontend for any CMS

Did you think of a magic Vue component that is able to render any data structure, no matter how complicated it is!?

Do you have data objects that you constantly change their structures, and you are tired of constantly adapting your Vue components to take into account the new data shapes?

Do you have a backend CMS providing you with multiple data objects with different shapes, and you want to build its frontend in a quick and easy way?

If yes, then Noor is what you are looking for! It is as easy as:

<nr-noor :data="myDataObj"/>

Installation

  1. Inside your Vue app:

    yarn add noor # Or: npm i noor
  2. Add a webpack resolve alias called src.

    • Vue CLI users:

      vue.config.js:

      module.exports = {
        ...
        configureWebpack: {
          resolve: {
            alias: {
              src: path.resolve(__dirname, 'src/')
            }
          }
        }
      }
    • Quasar CLI users: no need for this step as the alias already exists.

  3. Create Noor config file:

    src/noor/noor.conf.js

    export default {}

    (Configuration will be explained later)

  4. Create src/noor/components/ directory

  5. Install any desired Noor component library:

    yarn add @noor-project/components-lib-vue # Or npm i @noor-project/components-lib-vue

    then declare its components in noor.conf.js

    import noorVueLib from '@noor-project/components-lib-vue/components.json'
    
    export default {
      componentLibs: {
        noor: {
          vue: noorVueLib
        }
      }
    }

Usage

In your Vue components, import and use the NrNoor component:

<template>
  <nr-noor :data="myData"/>
</template>

<script>
import NrNoor from 'noor/noor/NrNoor.vue'

export default {
  name: 'MyComponent',
  components: { NrNoor },
  computed: {
    myData () {
      return {
        article: {
          title: 'My Article Title',
          body: 'My Article Body'
        }
      }
    }
  }
}

Customize

You can override any component from an installed library by adding a custom component with the same name. Let's see an example:

Let's assume that Noor vue library provides the following component:

NrNameUser

<template>
  <div class="nr-user__name">{{ data }}</div>
</template>

<script>
export default {
  name: 'NrNameUser',
  props: {
    data: {
      type: String,
      required: true
    }
  }
}
</script>

The above component will be used whenever a Noor data object contains a child user.name (on any nested level):

{
  myShop: {
    user: { name: 'Xyz', age: 33}
  }
}

and no more specific component exists (ex: NrNameUserMyShop).

If you would like instead to display the user name in bold and with a label, you'll need to provide a custom component:

NrNameUser

<template>
  <div class="nr-user__name">
    <b>Name: {{ data }}</b>
  </div>
</template>

<script>
export default {
  name: 'NrNameUser',
  props: {
    data: {
      type: String,
      required: true
    }
  }
}
</script>

Save the above component in the following path: src/noor/components/vue/NrNameUser.vue then declare it in noor.conf.js:

import myVueLib from 'src/noor/components/vue/components.json'

export default {
  componentLibs: {
    custom: {
      vue: myVueLib
    }
  }
}

src/noor/components/vue/components.json

[
  "NrNameUser"
]

You can also create a custom library using the same method. However to use it, you need to tell NrNoor about it using the lib property:

<nr-noor :data="myDataObj" lib="mylib"/>

Or alternatively declare it as default in noor.conf.js:

import mylib from 'src/noor/components/mylib/components.json'
export default {
  defaultComponentsLibrary: 'mylib'
  componentLibs: {
    custom: {
      mylib
    }
  }
}

To know how Noor works, using a guided example, please see docs/how-it-works.md

Please also take a look at the main Noor code at noor/NrNoor.vue.

Todo

  • Document the use of lib prop
  • Comment code and generate jsdoc/styleguidist docs
  • Build a components library based on pure Vue
  • Build a components library based on Quasar
  • Add editing interface
  • Add example use cases: CMS with GraphQL example, Json to html converter...etc

noor's People

Contributors

dependabot[bot] avatar ejez avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.