Skip to content
This repository was archived by the owner on Jul 6, 2023. It is now read-only.

Commit ea4c0a9

Browse files
ReganiRegani
authored
Merge pull request #6 from voicenter/v2.0
V2.0
2 parents 9fee376 + a9a3c3f commit ea4c0a9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+26670
-500
lines changed

‎.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,4 +131,16 @@ $RECYCLE.BIN/
131131
# Windows shortcuts
132132
*.lnk
133133

134+
node_modules/
135+
136+
playground/.nuxt
137+
playground/node_modules
138+
playground/dist
139+
playground/.output
140+
playground/.env
141+
playground/static/_redirects
142+
playground/static/robots.txt
143+
playground/static/sitemap.xml
144+
playground/static/UmbracoData.json
145+
134146
# End of https://www.gitignore.io/api/linux,windows,webstorm

‎README.md‎

Lines changed: 61 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
21
## umbraco-headless
32
Nuxt module that helps you to easily load your Umbraco data directly into your great Nuxt project.
43

54
## Setup:
6-
1. Update your server with this [extension](https://github.com/voicenter/umbraco-headless-api)
7-
2. Install dependency by running `npm i @voicenter/umbraco-headless`
8-
3. Configure your nuxt project by adding the following:
5+
1. Install dependency by running `npm i @voicenter/umbraco-headless` or `yarn add @voicenter/umbraco-headless`
6+
2. Configure your nuxt project by adding the following:
97

108
```js
119
// nuxt.config.js
@@ -17,101 +15,78 @@ Nuxt module that helps you to easily load your Umbraco data directly into your g
1715
}
1816
```
1917
### Options:
18+
In order to configure the module - create `umbraco-headless.config.js` file in the root of your Nuxt project.
2019
The following options can be specified while setting the module:
2120

22-
| Option | Description | Default |
23-
|---------------------------|:-----------------------------------------------------------------------|:-----------:|
24-
| namespace | The name of the Vuex module where data will be put | Umbraco |
25-
| dataFilename | The name of the Umbraco Data json file | UmbracoData |
26-
| trailingSlashRedirect | The value makes a 301 redirection to a non trailing slash URL | false |
27-
| prefetch | Array of objects, that will be fetched and saved in your Vuex store | [] |
21+
| Option | Description | Default | Required |
22+
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------: |
23+
| getUmbracoDataAPI | An URI where plugin will do a POST requests in order to fetch Umbraco Data | - | true |
24+
| generateUmbracoDataAPI | An URI where plugin will do a POST requests in order to fetch sitemap.xml robots.txt, umbracodata.json to generate files | - | true |
25+
| site | The name of the website | - | true |
26+
| trailingSlashRedirect | The value makes a 301 redirection to a non trailing slash URL | false | false |
27+
| redirects | - | - | false |
28+
| redirects.enable | If to enable 301 redirects | false | - |
29+
| redirects.redirectFolderName | Name of the Umbraco Data content type where to find redirects (plugin will check children's `oldUrl`/`newUrl` key pairs) | redirectFolder | - |
30+
| redirects.rootChildrenUmbracoPath | Path of the children content | SiteData.children | - |
31+
| redirects.enableInDevelopment | Whenever to do redirects in development mode | false | - |
2832

29-
4. Make sure you have all the created components in your pages folder. But if you don't have all the needed components - the plugin will setup the index.vue component for all the missing components routes.
33+
Make sure you have all the created components in your pages folder. But if you don't have all the needed components - the plugin will setup the index.vue component for all the missing components routes.
3034

3135
:warning: Be aware that this module will automatically setup the Vuex storage for your Nuxt project.
3236

33-
###2. Possible options of configuring the package inside nuxt.config.js
34-
```js
35-
umbracoHeadless: {
36-
namespace: 'String', // Name of the Vuex module where data will be put
37-
dataFileName: 'String', // Name of the Umbraco Data json file
38-
trailingSlashRedirect: true || false, // true value makes a 301 redirection to a non trailing slash URL,
39-
prefetch: [] // Array of objects, that will be fetched and saved in your Vuex Store, default []
40-
}
41-
```
42-
Template is below
37+
Example:
4338
```js
44-
umbracoHeadless: {
45-
namespace: 'Umbraco',
46-
dataFileName: 'UmbracoData',
47-
trailingSlashRedirect: true || false,
48-
prefetch: [
49-
{
50-
fetch: {
51-
type: 'contentType || path',
52-
53-
pattern: value, // contentType value if your fetch.type === 'contentType'
54-
Jpath // Your Component.Jpath if fetch.type === 'path'
55-
56-
},
57-
globalKey: 'globalKeyString', // Your Component is available from
58-
// Vuex store $store.getters['Umbraco/getGlobalDataByKey']('globalKeyString')
59-
ignore: [
60-
{
61-
key: [''], // Array of Component Fields that you need to ignore, their values will be null
62-
excludeStartLevel: 0 // Nesting level of your Component Fields you want to ignore, their values will be null
63-
}
64-
],
65-
},
66-
]
39+
// umbraco-headless.config.js
40+
export default {
41+
getUmbracoDataAPI: 'https://nuxt-umbraco-api.voicenter-ltd.workers.dev/',
42+
generateUmbracoDataAPI: 'http://localhost:3030',
43+
site: 'voice_he_prod',
44+
redirects: {
45+
enable: true,
46+
redirectFolderName: 'redirectFolder',
47+
rootChildrenUmbracoPath: 'SiteData.children',
48+
enableInDevelopment: true
49+
},
50+
prefetch: [
51+
{
52+
fetch: {
53+
type: 'contentType',
54+
pattern: 'websiteMainNavigation'
55+
},
56+
globalKey: 'websiteMainNavigation'
6757
}
58+
]
59+
}
6860
```
6961
## Usage
7062
Just add the following to your pages components:
71-
7263
```js
73-
async asyncData (context) {
74-
const data = await context.$Umbraco.get(context, {
75-
fetch: {
76-
type: 'path',
77-
pattern: context.route.meta[0].Jpath
78-
},
79-
apiOnly: true || false, // If apiOnly true your page will be fetched from api
80-
// If your Component is available in Vue store you set apiOnly false and your component
81-
// will be fetched from your Vuex store
82-
}) || {}
83-
return data;
84-
}
85-
```
86-
Or if you provided custom namespace:
87-
```js
88-
async asyncData (context) {
89-
const data = await context.$[your_namespace].get(context, {
90-
fetch: {
91-
type: 'path',
92-
pattern: context.route.meta[0].Jpath
93-
},
94-
apiOnly: true || false // If apiOnly true your page will be fetched from api
95-
// If your Component is available in Vue store you set apiOnly false and your component
96-
// will be fetched from your Vuex store
97-
}) || {}
98-
return data;
99-
}
64+
async asyncData (context) {
65+
const data = await context.$Umbraco.get(context, {
66+
fetch: {
67+
type: 'path',
68+
pattern: context.route.meta[0].Jpath
69+
},
70+
apiOnly: true || false, // If apiOnly true your page will be fetched from api
71+
// If your Component is available in Vue store you set apiOnly false and your component
72+
// will be fetched from your Vuex store
73+
}) || {}
74+
return data;
75+
}
10076
```
10177

10278
If you want to fetch your Page by contentType:
103-
10479
```js
105-
async asyncData (context) {
106-
const data = await context.$Umbraco.get(context, {
107-
fetch: {
108-
type: 'contentType',
109-
pattern: '[your content type value]'
110-
},
111-
apiOnly: true || false // If apiOnly true your page will be fetched from api
112-
// If your Component is available in Vue store you set apiOnly false and your component
113-
// will be fetched from your Vuex store
114-
}) || {}
115-
return data;
116-
}
117-
```
80+
async asyncData (context) {
81+
const data = await context.$Umbraco.get(context, {
82+
fetch: {
83+
type: 'contentType',
84+
pattern: '[your content type value]'
85+
},
86+
apiOnly: true || false // If apiOnly true your page will be fetched from api
87+
// If your Component is available in Vue store you set apiOnly false and your component
88+
// will be fetched from your Vuex store
89+
}) || {}
90+
return data;
91+
}
92+
```

‎api/index.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎index.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎modules/trailing.js‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎options/index.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)