|
1 | | -# Kentico Kontent sample Vue.js single-page application |
2 | | - |
3 | | -[](https://app.netlify.com/sites/kontent-sample-app-vue/deploys) |
4 | | -[](https://kontent-sample-app-vue.netlify.app/) |
5 | | -[](https://stackoverflow.com/tags/kentico-kontent) |
6 | | -[](https://discord.gg/SKCxwPtevJ) |
7 | | - |
8 | | -This is a sample website written in JavaScript utilizing the Kentico Kontent Delivery API to manage and retrieve content. You can register your account for free at <https://app.konent.ai>. |
9 | | - |
10 | | -## Application setup |
11 | | - |
12 | | -1. Install the latest version of NodeJS and npm. You can download both at <https://nodejs.org/en/download/>. |
13 | | -2. Clone the sample application repository. |
14 | | -3. Navigate to the root folder of the application in the command line. |
15 | | -4. Type `npm install` to install required npm packages. |
16 | | -5. Type `npm run serve` to start a development server. |
17 | | -6. The application opens in your browser at <http://localhost:8080>. |
18 | | - |
19 | | -### Data origin |
20 | | - |
21 | | -This sample wants to showcase either loading content from Kentico Kontent as well as load some part of the site from static JSON resources. |
22 | | - |
23 | | -> Basically the content that you can't find in the [`Localization`](https://github.com/Kentico/kontent-sample-app-vue/tree/master/src/Localization) JSON is loaded from Kentico Kontent. |
24 | | -
|
25 | | -* All data loaded from Kentico Kontent are using [`Stores`](https://github.com/Kentico/kontent-sample-app-vue/tree/master/src/Stores) as for examples "Latest Articles" section ([component here](https://github.com/Kentico/kontent-sample-app-vue/blob/master/src/components/LatestArticles.vue#L111)) on Home Page |
26 | | -* The data provided from [`Localization`](https://github.com/Kentico/kontent-sample-app-vue/tree/master/src/Localization) are using `vue-i18n` plugin, so every call in components using `$t('KEYWORD')` in components is loading data from these JSONs as for example "Banner" section" ([component here](https://github.com/Kentico/kontent-sample-app-vue/blob/master/src/components/Banner.vue#L6)) |
27 | | - |
28 | | -### Connecting to your sample project |
29 | | - |
30 | | -At the first run of the app, you'll be presented with a configuration page. It will allow you to connect the app to your Kentico Kontent sample project or create a new one. You'll also be able to start a trial and convert to a free plan when the trial expires. |
31 | | - |
32 | | -* If you want to open the configuration page after the project is already connected to the app. Just open url <http://localhost:8080/Admin/Configuration>. |
33 | | - |
34 | | -Alternatively, you can connect your project manually as per the chapter below. |
35 | | - |
36 | | -#### Connecting to your project manually |
37 | | - |
38 | | -If you want to change the source Kentico Kontent project, follow these steps: |
39 | | - |
40 | | -1. In Kentico Kontent, choose Project settings from the app menu. |
41 | | -2. Under Development, choose API keys. |
42 | | -3. Copy your Project ID. |
43 | | -4. Create and open a `.env.local` file in the sample application folder. |
44 | | -5. On the first line, add your Project ID constant using the format `VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000`. |
45 | | -6. Save the file. |
46 | | - |
47 | | -When you now run the application, it will retrieve the content from your sample project. This set up has higher priority then [setting your sample project by the Configuration page](#connecting-to-your-sample-project). |
48 | | - |
49 | | -## Previewing content from your project |
50 | | - |
51 | | -To preview unpublished content in the sample application, follow these steps: |
52 | | - |
53 | | -1. In Kentico Kontent, choose Project settings from the app menu. |
54 | | -2. Under Development, choose API keys. |
55 | | -3. Copy your Project ID and Preview API key. |
56 | | -4. Create and open a `.env.local` file in the sample application folder. |
57 | | -5. On the first line, add your Project ID constant using the format `VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000`. |
58 | | -6. On the next line, add your Preview API key using the format `VUE_APP_PREVIEW_API_KEY=00000000-0000-0000-0000-000000000000`. |
59 | | -7. Save the file. |
60 | | - |
61 | | -When you now run the application, you will see all project content including the unpublished version of content items. |
62 | | - |
63 | | -## Content administration |
64 | | - |
65 | | -1. Navigate to <https://app.kontent.ai> in your browser. |
66 | | -2. Sign in with your credentials. |
67 | | -3. Manage content in the content administration interface of your sample project. |
68 | | - |
69 | | -You can learn [more about content editing](https://kontent.ai/learn/tutorials/write-and-collaborate/create-content/introducing-content-items) at Kontent Learn. |
70 | | - |
71 | | -## Content delivery |
72 | | - |
73 | | -You can retrieve content either through the Kontent Delivery SDKs or the Kentico Kontent Delivery API: |
74 | | - |
75 | | -* For published content, use `https://deliver.kontent.ai/PROJECT_ID/items`. |
76 | | -* For unpublished content, use `https://preview-deliver.kontent.ai/PROJECT_ID/items`. |
77 | | - |
78 | | -For more info about the API, see the [API reference](https://developer.kenticocloud.com/reference). |
79 | | - |
80 | | -You can find the Delivery and other SDKs at <https://github.com/Kentico>. |
81 | | - |
82 | | -## Deployment |
83 | | - |
84 | | -You can use, for example, [surge](http://surge.sh/) to deploy your app live. Check out the step-by-step guide on our [blog](https://kontent.ai/blog/3-steps-to-rapidly-deploy-headless-single-page-app). |
85 | | - |
| 1 | +# Kontent.ai sample Vue.js single-page application |
| 2 | + |
| 3 | +[](https://app.netlify.com/sites/kontent-sample-app-vue/deploys) |
| 4 | +[](https://kontent-sample-app-vue.netlify.app/) |
| 5 | +[](https://stackoverflow.com/tags/kontent-ai) |
| 6 | +[](https://discord.gg/SKCxwPtevJ) |
| 7 | + |
| 8 | +This is a sample website written in JavaScript utilizing the Kontent.ai Delivery API to retrieve content. You can register your account for free at <https://app.kontent.ai>. |
| 9 | + |
| 10 | +## Application setup |
| 11 | + |
| 12 | +1. Install the latest version of NodeJS and npm. You can download both at <https://nodejs.org/en/download/>. |
| 13 | +2. Clone the sample application repository. |
| 14 | +3. Navigate to the root folder of the application in the command line. |
| 15 | +4. Type `npm install` to install required npm packages. |
| 16 | +5. Type `npm run serve` to start a development server. |
| 17 | +6. The application opens in your browser at <http://localhost:8080>. |
| 18 | + |
| 19 | +### Data origin |
| 20 | + |
| 21 | +This sample wants to showcase either loading content from Kontent.ai as well as loading some part of the site from static JSON resources. |
| 22 | + |
| 23 | +> Basically, the content that you can't find in the [`Localization`](https://github.com/kontent-ai/sample-app-vue/tree/master/src/Localization) folder is loaded from Kontent.ai. |
| 24 | +
|
| 25 | +* The data provided from [`Localization`](https://github.com/kontent-ai/kontent-sample-app-vue/tree/master/src/Localization) are using the `vue-i18n` plugin, so every call in components using `$t('KEYWORD')` in components is loading data from these JSONs as "Banner" section" ([component here](https://github.com/kontent-ai/kontent-sample-app-vue/blob/master/src/components/Banner.vue#L6)) |
| 26 | + |
| 27 | +### Data fetching |
| 28 | + |
| 29 | +This solution fetches data using the [Delivery client](https://github.com/kontent-ai/delivery-sdk-js). For more implementation detail on how to set up the client see [src/Client.js](https://github.com/kontent-ai/sample-app-vue/blob/master/src/Client.js). After your client is set up, you are able to deliver your content to your project. The following example showcases how to use a Kontent.ai delivery client to fetch data. |
| 30 | + |
| 31 | +```js |
| 32 | +fetchBrewer: function () { |
| 33 | + var query = Client.items() |
| 34 | + .type('brewer') |
| 35 | + .equalsFilter('url_pattern', this.$route.params.brewerSlug) |
| 36 | + |
| 37 | + if(this.language) { |
| 38 | + query.languageParameter(this.language) |
| 39 | + } |
| 40 | + |
| 41 | + query |
| 42 | + .toPromise() |
| 43 | + .then(response => { |
| 44 | + // store data to the state variable of your component. |
| 45 | + this.brewer = response.data.items[0] |
| 46 | + } |
| 47 | +} |
| 48 | +``` |
| 49 | +
|
| 50 | +### Language fallbacks |
| 51 | +
|
| 52 | +To deal with content that is not available in the current language, this project uses a method called language fallbacks. It will fetch the content in the language set as a fallback language in the Kontent.ai project and redirect the website to the URL with a prefix of the given language. However, it is possible to disable language fallbacks by adding a filter of `system.language` to your query. For more information about getting localized content check this [`link.`](https://kontent.ai/learn/tutorials/develop-apps/get-content/localized-content-items/?tech=javascript) |
| 53 | +
|
| 54 | +```js |
| 55 | +var query = Client.items().type('about_us'); |
| 56 | + |
| 57 | +if (this.language) { |
| 58 | + query |
| 59 | + .languageParameter(this.language) |
| 60 | + .equalsFilter('system.language', 'es-ES'); |
| 61 | +} |
| 62 | +``` |
| 63 | +
|
| 64 | +## Connecting to your sample project |
| 65 | +
|
| 66 | +On the first run of the app, you'll be presented with a configuration page. It will allow you to connect the app to your Kontent.ai sample project or create a new one. You'll also be able to start a trial and convert to a developer plan when the trial expires. |
| 67 | +
|
| 68 | +> If you want to open the configuration page after the project is already connected to the app. Just open the URL <http://localhost:8080/Admin/Configuration>. |
| 69 | +
|
| 70 | +Alternatively, you can connect your project manually as per the chapter below. |
| 71 | +
|
| 72 | +### Connecting to your project manually |
| 73 | +
|
| 74 | +If you want to change the source Kontent.ai project, follow these steps: |
| 75 | +
|
| 76 | +1. In Kontent.ai, choose Project settings from the app menu. |
| 77 | +2. Under Production environment settings, choose API keys. |
| 78 | +3. Copy your Project ID. |
| 79 | +4. Create and open a `.env.local` file in the sample application folder. |
| 80 | +5. On the first line, add your Project ID constant using the format `VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000`. |
| 81 | +6. Save the file. |
| 82 | +
|
| 83 | +When you now run the application, it will retrieve the content from your sample project. This setup has a higher priority than [setting your sample project via the Configuration page](#connecting-to-your-sample-project). |
| 84 | +
|
| 85 | +### Previewing content from your project |
| 86 | +
|
| 87 | +To preview unpublished content in the sample application, follow these steps: |
| 88 | +
|
| 89 | +1. In Kontent.ai, choose Project settings from the app menu. |
| 90 | +2. Under Production environment settings, choose API keys. |
| 91 | +3. Copy your Project ID and Preview API key. |
| 92 | +4. Create and open a `.env.local` file in the sample application folder. |
| 93 | +5. On the first line, add your Project ID constant using the format `VUE_APP_PROJECT_ID=00000000-0000-0000-0000-000000000000`. |
| 94 | +6. On the next line, add your Preview API key using the format `VUE_APP_PREVIEW_API_KEY=00000000-0000-0000-0000-000000000000`. |
| 95 | +7. Save the file. |
| 96 | +
|
| 97 | +When you now run the application, you will see all project content including the unpublished version of content items. |
| 98 | +
|
| 99 | +## Content administration |
| 100 | +
|
| 101 | +1. Navigate to <https://app.kontent.ai> in your browser. |
| 102 | +2. Sign in with your credentials. |
| 103 | +3. Manage content in the content administration interface of your sample project. |
| 104 | +
|
| 105 | +You can learn [more about content editing](https://kontent.ai/learn/tutorials/write-and-collaborate/create-content/introducing-content-items) at Kontent.ai Learn. |
| 106 | +
|
| 107 | +## Content delivery |
| 108 | +
|
| 109 | +You can retrieve content either through the Kontent.ai Delivery SDKs or the Kontent.ai Delivery API: |
| 110 | +
|
| 111 | +* For published content, use `https://deliver.kontent.ai/PROJECT_ID/items`. |
| 112 | +* For unpublished content, use `https://preview-deliver.kontent.ai/PROJECT_ID/items`. |
| 113 | + |
| 114 | +For more info about the API, see the [API reference](hhttps://kontent.ai/learn/reference/kontent-apis-overview/). |
| 115 | + |
| 116 | +You can find the Delivery and other SDKs at <https://github.com/kontent-ai>. |
| 117 | + |
| 118 | +## Deployment |
| 119 | + |
| 120 | +You can use, for example, [surge](http://surge.sh/) to deploy your app live. Check out the step-by-step guide on our [blog](https://kontent.ai/blog/3-steps-to-rapidly-deploy-headless-single-page-app). |
0 commit comments