@juliendargelos/nuxt-data
Yaml based nuxt data module.
Last updated a year ago by juliendargelos .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @juliendargelos/nuxt-data 
SYNC missed versions from official npm registry.

Nuxt data

Yaml based nuxt data module.

Install

With yarn:

yarn add @juliendargelos/nuxt-data

With npm

npm install -s @juliendargelos/nuxt-data

Usage

Add the module in nuxt config:

export default {
  modules: [
    '@juliendargelos/nuxt-data'
  ]
}

Create a data folder at the root of your nuxt project. Project data is saved as yaml files and parsed with js-yaml. The structure of the folder determines data structure:

data/
 ├ settings.yml
 │   ┌────────────────────────────────────────────┐
 │   │ title: Website                             │
 │   │ description: This is a website.            │
 │   └────────────────────────────────────────────┘
 │
 ├ pages/
 │ └ home.yml
 │   ┌────────────────────────────────────────────┐
 │   │ title: Home                                │
 │   │ content: Welcome home.                     │
 │   └────────────────────────────────────────────┘
 │
 └ articles/
   ├ lorem-ipsum.yml
   │ ┌────────────────────────────────────────────┐
   │ │ title: Lorem ipsum                         │
   │ │ image: /uploads/lorem-ipsum.jpg            │
   │ │ content: Dolor sit amet.                   │
   │ └────────────────────────────────────────────┘
   │
   └ dolor-sit.yml
     ┌────────────────────────────────────────────┐
     │ title: Dolor sit                           │
     │ image: /uploads/dolor-sit.jpg              │
     │ content: Amet, consectetur.                │
     └────────────────────────────────────────────┘

Access data from javascript:

// Inside webpack
import data from 'data'

// Outside webpack
import { data } from '@juliendargelos/nuxt-data'

data
// {
//   settings: {
//     title: 'Website',
//     description: 'This is a website.'
//   },
//   pages: {
//     home: {
//       title: 'Home',
//       content: 'Welcome home.'
//     }
//   },
//   articles: {
//     'lorem-ipsum': {
//       title: 'Lorem ipsum',
//       image: '/uploads/lorem-ipsum.jpg',
//       content: 'Dolor sit amet.'
//     },
//     'dolor-sit': {
//       title: 'Dolor sit',
//       image: '/uploads/lorem-ipsum.jpg',
//       content: 'Amet, consectetur.'
//     }
//   }
// }

The object exported from data is not just a javascript object, it's an instance of Data, and all objects (except arrays) it contains are also Data instances:

Instance properties:

  • slug: Stores the key of the parent data which contains this instance. If it hasn't parent data, the slug is null.
  • object: An object containing all the data values and its slug.
  • props: An object that can be used to define vue component props with default values from the data.

Instance methods:

  • forEach: Behaves the same as Array.prototype.forEach except there is a key argument passed to the callback function before the index arguments: (value, key, index, data) => { }.
  • map: Behaves the same as Array.prototype.map except there is a key argument passed to the callback function before the index arguments: (value, key, index, data) => { }.
  • filter: Behaves the same as Array.prototype.filter except it returns a new Data instance instead of an array. It can also take a string or an object as callback:
// Equivalent
data.filter('foo')
data.filter(value => value.foo)
// Equivalent
data.filter({foo: true, bar: 2})
data.filter(value => value.foo === true && value.bar === 2)
  • sort: Behaves the same as Array.prototype.sort except it returns a new Data instance instead of mutating the original one. It can also take a string as callback:
// Equivalent
data.sort('foo')
data.sort((a, b) => a.foo < b.foo ? -1 : 1)
  • reverse: Behaves the same as Array.prototype.reverse except it returns a new Data instance instead of mutating the original one.

Current Tags

  • 1.0.1                                ...           latest (a year ago)

2 Versions

  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 2
Last Month 3
Dependencies (4)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |