1.0.1 • Published 5 years ago
@juliendargelos/nuxt-data v1.0.1
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 isnull
.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 akey
argument passed to the callback function before theindex
arguments:(value, key, index, data) => { }
.map
: Behaves the same as Array.prototype.map except there is akey
argument passed to the callback function before theindex
arguments:(value, key, index, data) => { }
.filter
: Behaves the same as Array.prototype.filter except it returns a newData
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 newData
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 newData
instance instead of mutating the original one.