${result}
` 44 | return result 45 | } 46 | 47 | // Return null to stick with the default behavior for everything else 48 | return null 49 | } 50 | -------------------------------------------------------------------------------- /src/prismic/link-resolver.js: -------------------------------------------------------------------------------- 1 | /** 2 | * To learn more about Link Resolving check out the Prismic documentation 3 | * https://prismic.io/docs/vuejs/beyond-the-api/link-resolving 4 | */ 5 | 6 | export default function (doc) { 7 | if (doc.isBroken) { 8 | return '/not-found' 9 | } 10 | 11 | if (doc.type === 'home') { 12 | return '/' 13 | } 14 | 15 | if (doc.type === 'page') { 16 | return '/page/' + doc.uid 17 | } 18 | 19 | return '/not-found' 20 | } 21 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import NotFound from './views/NotFound.vue' 4 | import Preview from './views/Preview.vue' 5 | import Tutorial from './views/Tutorial.vue' 6 | 7 | Vue.use(Router) 8 | 9 | export default new Router({ 10 | mode: 'history', 11 | routes: [ 12 | { 13 | path: '/', 14 | redirect: { name: 'tutorial' } 15 | }, 16 | { 17 | path: '/not-found', 18 | name: 'not-found', 19 | component: NotFound 20 | }, 21 | { 22 | path: '/preview', 23 | name: 'preview', 24 | component: Preview 25 | }, 26 | { 27 | path: '/tutorial', 28 | name: 'tutorial', 29 | component: Tutorial 30 | }, 31 | { 32 | path: '*', 33 | redirect: { name: 'not-found' } 34 | } 35 | ] 36 | }) 37 | -------------------------------------------------------------------------------- /src/views/NotFound.vue: -------------------------------------------------------------------------------- 1 | 2 |Not Found
4 |Loading the Prismic's Preview...
4 |
11 | High five, you deserve it!
12 |Grab a well deserved cup of coffee, you’re just a few steps away from creating a Vue.js component with content managed in Prismic.
13 |-
19 |
- 1Bootstrap your project
20 | - 2Create a Custom Type "Page"
21 |
- 3Publish your first "Page" document
22 |
- 4Query the API in your Vue component
23 |
- 5Well done!
24 |
This is a tutorial page included in this Vue.js starter project, it has a few useful links and example code snippets to help you get started.
34 |You can access this very tutorial page at http://localhost:8080/tutorial.
35 | 36 |Follow these 5 simple steps
37 | 38 |1Bootstrap your project
39 |Create a Prismic content repository
40 |A repository is where your website’s content will live. Simply create one choosing a repository name and a plan. We’ve got a variety of plans including our favorite: Free!
41 |Configure your project
42 |Open the index.html file and define the API endpoint of your Prismic repository:
43 |<!-- In public/index.html -->
44 |
45 | <script>
46 | window.prismic = {
47 | endpoint: 'https://your-repo-name.prismic.io/api/v2'
48 | }
49 | </script>
50 | Next let’s see how to create a Vue component filled with content retrieved from Prismic.
52 | 53 |2Create a Custom Type "Page"
54 |We’ll create a document containing a title, a description, a call to action and an icon. Let’s create a Custom Type in Prismic with the corresponding fields. We’ll add an additional UID field (unique identifier) for querying the document.
55 |Go to the Web interface of the Prismic repository you’ve just created (at https://your-repo-name.prismic.io). Then navigate to the "Custom Types" section (icon on the left navbar) and create a new Repeatable Type, for this tutorial let’s name it "Page", so that its API ID will be set to "page".
56 |Once the "Page" Custom Type is created, we have to define how we want to model it, that is to say a document containing a UID field, a rich text field for the title, a rich text field for the description, a link field + a rich text field for the call to action and an image field for the icon. Click on "JSON editor" (right sidebar) and paste in the following JSON data.
57 |When you’re done, hit "Save".
58 |{
59 | "Main": {
60 | "uid": {
61 | "type": "UID",
62 | "config": {
63 | "placeholder": "UID...",
64 | "label": "UID"
65 | }
66 | },
67 | "title": {
68 | "type": "StructuredText",
69 | "config": {
70 | "single": "heading1",
71 | "label": "Title",
72 | "placeholder": "Title..."
73 | }
74 | },
75 | "description": {
76 | "type": "StructuredText",
77 | "config": {
78 | "multi": "paragraph, heading2, strong, em, hyperlink",
79 | "allowTargetBlank": true,
80 | "label": "Description",
81 | "placeholder": "Description..."
82 | }
83 | },
84 | "cta_link": {
85 | "type": "Link",
86 | "config": {
87 | "allowTargetBlank": true,
88 | "label": "CTA link",
89 | "placeholder": "CTA link..."
90 | }
91 | },
92 | "cta_text": {
93 | "type": "StructuredText",
94 | "config": {
95 | "single": "paragraph",
96 | "label": "CTA text",
97 | "placeholder": "CTA text..."
98 | }
99 | },
100 | "icon": {
101 | "type": "Image"
102 | }
103 | }
104 | }
105 | 3Publish your first "Page" document
108 |Now it is time to fill in and publish your first "Page" document in your Prismic repository.
109 |110 | Create a new "Page" document in your repository: go to "Content" and hit "New". 111 | Fill the corresponding fields. Note the value you filled in the UID field, because it will be a part of the component route path, for this tutorial let’s put "quickstart". 112 |
113 |When you’re done, hit "Save" then "Publish".
114 | 115 |4Query the API in your Vue component
116 | 117 |Create a component that retrieves your content
118 |Let’s create a Vue component that will display content fetched from the Prismic API.
119 |Go back to your local code and create a new Vue component file named "Page.vue" inside the views folder (src/views/Page.vue). We’ll make an API call to retrieve the document content, querying it by specifying its UID.
120 |Here’s an example that’ll render a "Page" document with its title, description, call to action and icon:
121 |<!-- Create file src/views/Page.vue -->
122 |
123 | <template>
124 | <div class="wrapper">
125 | <prismic-edit-button :documentId="documentId"/>
126 | <h1 class="title">
127 | {{ "\{\{ $prismic.richTextAsPlain(fields.title) \}\}" }}
128 | </h1>
129 | <prismic-rich-text :field="fields.description" class="description"/>
130 | <div class="cta-wrapper">
131 | <prismic-link :field="fields.ctaLink" class="cta">
132 | {{ "\{\{ $prismic.richTextAsPlain(fields.ctaText) \}\}" }}
133 | </prismic-link>
134 | </div>
135 | <div class="icon-wrapper">
136 | <prismic-image :field="fields.icon" class="icon"/>
137 | </div>
138 | </div>
139 | </template>
140 |
141 | <script>
142 | export default {
143 | name: 'Page',
144 | data () {
145 | return {
146 | documentId: '',
147 | fields: {
148 | title: null,
149 | description: null,
150 | ctaLink: null,
151 | ctaText: null,
152 | icon: null
153 | }
154 | }
155 | },
156 | methods: {
157 | getContent (uid) {
158 | this.$prismic.client.getByUID('page', uid)
159 | .then((document) => {
160 | if (document) {
161 | this.documentId = document.id
162 | this.fields.title = document.data.title
163 | this.fields.description = document.data.description
164 | this.fields.ctaLink = document.data.cta_link
165 | this.fields.ctaText = document.data.cta_text
166 | this.fields.icon = document.data.icon
167 | } else {
168 | this.$router.push({ name: 'not-found' })
169 | }
170 | })
171 | }
172 | },
173 | created () {
174 | this.getContent(this.$route.params.uid)
175 | },
176 | beforeRouteUpdate (to, from, next) {
177 | this.getContent(to.params.uid)
178 | next()
179 | }
180 | }
181 | </script>
182 |
183 | <style>
184 | .wrapper {
185 | max-width: 820px;
186 | margin-left: auto;
187 | margin-right: auto;
188 | padding: 40px 10px;
189 | font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
190 | }
191 |
192 | .title {
193 | font-size: 32px;
194 | }
195 |
196 | .description {
197 | margin-top: 40px;
198 | }
199 |
200 | .description h2 {
201 | font-size: 24px;
202 | }
203 |
204 | .description h2:not(:first-child) {
205 | margin-top: 20px;
206 | }
207 |
208 | .description p {
209 | line-height: 1.5;
210 | }
211 |
212 | .description p:not(:first-child) {
213 | margin-top: 10px;
214 | }
215 |
216 | .description a {
217 | color: #404e9f;
218 | }
219 |
220 | .description a:hover {
221 | text-decoration: underline;
222 | }
223 |
224 | .cta-wrapper {
225 | margin-top: 40px;
226 | }
227 |
228 | .cta {
229 | display: inline-flex;
230 | justify-content: center;
231 | align-items: center;
232 | height: 40px;
233 | padding: 0 20px;
234 | background-color: #404e9f;
235 | color: white;
236 | }
237 |
238 | .icon-wrapper {
239 | margin-top: 40px;
240 | }
241 |
242 | .icon {
243 | max-width: 100%;
244 | }
245 | </style>
246 | Specify a route for the Page component
249 |Now that you’ve created your Page component, add the following route to the Vue Router, in src/router.js file:
250 |// In src/router.js
251 |
252 | // ...
253 |
254 | import Page from './views/Page.vue'
255 |
256 | // ...
257 |
258 | {
259 | path: '/page/:uid',
260 | name: 'page',
261 | component: Page
262 | },
263 |
264 | // ...
265 | In your browser go to http://localhost:8080/page/quickstart and voilà! You’ve officially created a Vue component that pulls content from Prismic.
268 | 269 |5Well done!
270 |Sit back and enjoy the result.
271 |Basically in these few steps you’ve added content management to your Vue.js project and thanks to Prismic, you’ll have:
272 |-
273 |
- Full versioning of your content 274 |
- A nice rich editor to create and edit your content 275 |
- Collaboration with other users you choose to add to your repository 276 |
- Performance and scalability for your content using a Content Delivery Network around the world 277 |