Skip to content

Commit e4ce28c

Browse files
committed
Separate the api-overview out into getting-started page
1 parent 04058c0 commit e4ce28c

File tree

2 files changed

+293
-287
lines changed

2 files changed

+293
-287
lines changed

docs/api-overview.md

Lines changed: 0 additions & 287 deletions
Original file line numberDiff line numberDiff line change
@@ -44,293 +44,6 @@ These docs are for version 2.x. For [email protected], please go to [https://fe
4444

4545
`** Improved in v3.0.0`
4646

47-
## Installation
48-
49-
```bash
50-
npm install feathers-vuex --save
51-
```
52-
53-
```bash
54-
yarn add feathers-vuex
55-
```
56-
57-
IMPORTANT: Feathers-Vuex is (and requires to be) published in ES6 format for full compatibility with JS classes. If your project uses Babel, it must be configured properly. See the [Project Configuration](#projectconfiguration) section for more information.
58-
59-
### With feathers-socketio
60-
61-
A realtime-transport like Socket.io or Primus is required in order to take advantage of the real-time socket events built into Feathers-Vuex. The `feathers-hooks-common` package, specified below, is not required to work with Feathers-Vuex.
62-
63-
```bash
64-
npm i @feathersjs/feathers @feathersjs/socketio-client @feathersjs/authentication-client socket.io-client feathers-vuex feathers-hooks-common --save
65-
```
66-
67-
```bash
68-
yarn add @feathersjs/feathers @feathersjs/socketio-client @feathersjs/authentication-client socket.io-client feathers-vuex feathers-hooks-common
69-
```
70-
71-
### With feathers-rest
72-
73-
Feathers-Vuex works with Feathers-Rest, but keep in mind that the `feathers-rest` client does not listen to socket events. The `feathers-hooks-common` package, specified below, is not required to work with Feathers-Vuex.
74-
75-
```bash
76-
npm i @feathersjs/feathers @feathersjs/rest-client @feathersjs/authentication-client feathers-hooks-common feathers-vuex --save
77-
```
78-
79-
```bash
80-
yarn add @feathersjs/feathers @feathersjs/rest-client @feathersjs/authentication-client feathers-hooks-common feathers-vuex
81-
```
82-
83-
## Project Configuration
84-
85-
### Vue-CLI
86-
87-
If your project runs on Vue-CLI, add the following to your `vue.config.js` file:
88-
89-
```js
90-
module.exports = {
91-
transpileDependencies: ['feathers-vuex']
92-
}
93-
```
94-
95-
### Quasar
96-
97-
For Quasar apps, `transpileDependencies` can be updated in `quasar.conf.js` under build as
98-
99-
```
100-
build: {
101-
transpileDependencies: ['feathers-vuex']
102-
}
103-
```
104-
105-
### Nuxt
106-
107-
If your project uses Nuxt, add the following to your `nuxt.config.js` file:
108-
109-
```
110-
build: {
111-
transpile: ['feathers-vuex'],
112-
}
113-
```
114-
115-
Be sure to read the section of the docs dedicated to [Working With Nuxt](./nuxt.md).
116-
117-
## Vue DevTools
118-
119-
Since Feathers-Vuex extensively uses Vuex under the hood, you'll want to make sure your VueJS developer tools are up to date AND setup properly. Specifically, the "New Vuex Backend" needs to be enabled. To setup the devtools
120-
121-
1. Open the Vue tab of the developer tools while viewing your Vue project in the browser.
122-
1. Go to the Settings panel.
123-
1. Enable the new Vuex backend:
124-
125-
![New Vuex Backend in Vue DevTools](/img/devtools.jpg)
126-
127-
When the above setting is not enabled, the Vue Devtools will likely hang when you start working on a large project.
128-
129-
## Setup
130-
131-
Using Feathers-Vuex happens in these steps:
132-
133-
1. [Setup the Feathers client and Feathers-Vuex](#setup-the-feathers-client-and-feathers-vuex)
134-
2. [Define a Model class and service plugin for each service](#setup-one-or-more-service-plugins)
135-
3. [Setup the auth plugin](#setup-the-auth-plugin), if required.
136-
4. Register the plugins with the Vuex store.
137-
138-
### Feathers Client & Feathers-Vuex
139-
140-
To setup `feathers-vuex`, we first need to setup the latest Feathers client. We can also setup feathers-vuex in the same file. Depending on your requirements, you'll need to install the feathers-client dependencies, as shown, above.
141-
142-
Note that this example includes an app-level hook that removes attributes for handling temporary (local-only) records.
143-
144-
```js
145-
// src/feathers-client.js
146-
import feathers from '@feathersjs/feathers'
147-
import socketio from '@feathersjs/socketio-client'
148-
import auth from '@feathersjs/authentication-client'
149-
import io from 'socket.io-client'
150-
import { iff, discard } from 'feathers-hooks-common'
151-
import feathersVuex from 'feathers-vuex'
152-
153-
const socket = io('http://localhost:3030', {transports: ['websocket']})
154-
155-
const feathersClient = feathers()
156-
.configure(socketio(socket))
157-
.configure(auth({ storage: window.localStorage }))
158-
.hooks({
159-
before: {
160-
all: [
161-
iff(
162-
context => ['create', 'update', 'patch'].includes(context.method),
163-
discard('__id', '__isTemp')
164-
)
165-
]
166-
}
167-
})
168-
169-
export default feathersClient
170-
171-
// Setting up feathers-vuex
172-
const { makeServicePlugin, makeAuthPlugin, BaseModel, models, FeathersVuex } = feathersVuex(
173-
feathersClient,
174-
{
175-
serverAlias: 'api', // optional for working with multiple APIs (this is the default value)
176-
idField: '_id', // Must match the id field in your database table/collection
177-
whitelist: ['$regex', '$options']
178-
}
179-
)
180-
181-
export { makeAuthPlugin, makeServicePlugin, BaseModel, models, FeathersVuex }
182-
```
183-
184-
### Service Plugins
185-
186-
The following example creates a User class and registers it with the new `makeServicePlugin` utility function. This same file is also a great place to add your service-level hooks, so they're shown, too.
187-
188-
```js
189-
// src/store/services/users.js
190-
import feathersClient, { makeServicePlugin, BaseModel } from '../../feathers-client'
191-
192-
class User extends BaseModel {
193-
constructor(data, options) {
194-
super(data, options)
195-
}
196-
// Required for $FeathersVuex plugin to work after production transpile.
197-
static modelName = 'User'
198-
// Define default properties here
199-
static instanceDefaults() {
200-
return {
201-
email: '',
202-
password: ''
203-
}
204-
}
205-
}
206-
const servicePath = 'users'
207-
const servicePlugin = makeServicePlugin({
208-
Model: User,
209-
service: feathersClient.service(servicePath),
210-
servicePath
211-
})
212-
213-
// Setup the client-side Feathers hooks.
214-
feathersClient.service(servicePath).hooks({
215-
before: {
216-
all: [],
217-
find: [],
218-
get: [],
219-
create: [],
220-
update: [],
221-
patch: [],
222-
remove: []
223-
},
224-
after: {
225-
all: [],
226-
find: [],
227-
get: [],
228-
create: [],
229-
update: [],
230-
patch: [],
231-
remove: []
232-
},
233-
error: {
234-
all: [],
235-
find: [],
236-
get: [],
237-
create: [],
238-
update: [],
239-
patch: [],
240-
remove: []
241-
}
242-
})
243-
244-
export default servicePlugin
245-
```
246-
247-
### Auth Plugin
248-
249-
If your application uses authentication, the Auth Plugin will probably come in handy. It's a couple of lines to setup:
250-
251-
```js
252-
// src/store/store.auth.js
253-
import { makeAuthPlugin } from '../feathers-client'
254-
255-
export default makeAuthPlugin({ userService: 'users' })
256-
```
257-
258-
[Read more about the Auth Plugin](/auth-plugin.html).
259-
260-
### Vuex store
261-
262-
This example uses Webpack's `require.context` feature. If you're not using Webpack, you'll need to manually import each module and list them in the `plugins` array.
263-
264-
```js
265-
// src/store/store.js
266-
import Vue from 'vue'
267-
import Vuex from 'vuex'
268-
import { FeathersVuex } from '../feathers-client'
269-
import auth from './store.auth'
270-
271-
Vue.use(Vuex)
272-
Vue.use(FeathersVuex)
273-
274-
const requireModule = require.context(
275-
// The path where the service modules live
276-
'./services',
277-
// Whether to look in subfolders
278-
false,
279-
// Only include .js files (prevents duplicate imports`)
280-
/.js$/
281-
)
282-
const servicePlugins = requireModule
283-
.keys()
284-
.map(modulePath => requireModule(modulePath).default)
285-
286-
export default new Vuex.Store({
287-
state: {},
288-
mutations: {},
289-
actions: {},
290-
plugins: [...servicePlugins, auth]
291-
})
292-
```
293-
294-
## Begin Using Feathers-Vuex
295-
296-
There are a couple of ways to use Feathers-Vuex. Version 2.0 heavily focuses on abstracting away the Vuex syntax in favor of using [Model classes](/model-classes.html). The Model classes are a layer on top of the Vuex getters, mutations, and actions. You can, of course, also directly use the [service plugin's getters, mutations, and actions](/service-plugin.html).
297-
298-
There are two plugins included:
299-
300-
1. The [Service Plugin](./service-plugin.md) adds a Vuex store for new services.
301-
2. The [Auth Plugin](./auth-plugin.md) sets up the Vuex store for authentication / logout.
302-
303-
To see `feathers-vuex` in a working vue-cli application, check out [`feathers-chat-vuex`](https://github.com/feathersjs-ecosystem/feathers-chat-vuex).
304-
305-
### Global Configuration
306-
307-
The following default options are available for configuration:
308-
309-
```js
310-
const defaultOptions = {
311-
autoRemove: false, // Automatically remove records missing from responses (only use with feathers-rest)
312-
addOnUpsert: false, // Add new records pushed by 'updated/patched' socketio events into store, instead of discarding them
313-
enableEvents: true, // Listens to socket.io events when available
314-
idField: 'id', // The field in each record that will contain the id
315-
tempIdField: '__id',
316-
debug: false, // Set to true to enable logging messages.
317-
keepCopiesInStore: false, // Set to true to store cloned copies in the store instead of on the Model.
318-
nameStyle: 'short', // Determines the source of the module name. 'short', 'path', or 'explicit'
319-
paramsForServer: [], // Custom query operators that are ignored in the find getter, but will pass through to the server.
320-
preferUpdate: false, // When true, calling model.save() will do an update instead of a patch.
321-
replaceItems: false, // Instad of merging in changes in the store, replace the entire record.
322-
serverAlias: 'api',
323-
skipRequestIfExists: false, // For get action, if the record already exists in store, skip the remote request
324-
whitelist: [] // Custom query operators that will be allowed in the find getter.
325-
}
326-
```
327-
328-
### Note about feathers-reactive
329-
330-
Previous versions of this plugin required both RxJS and `feathers-reactive` to receive realtime updates. `[email protected]` has socket messaging support built in and takes advantage of Vuex reactivity, so RxJS and `feathers-reactive` are no longer required or supported.
331-
332-
Each service module can also be individually configured.
333-
33447
## License
33548

33649
Licensed under the [MIT license](LICENSE).

0 commit comments

Comments
 (0)