├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets ├── README.md └── css │ ├── base │ ├── _base.scss │ ├── _reboot.scss │ └── _variables.scss │ ├── components │ └── _components.scss │ ├── layout │ └── _layout.scss │ └── style.scss ├── components ├── README.md ├── layout │ └── BlogHeader.vue └── posts │ ├── PostContents.vue │ └── PostList.vue ├── layouts ├── README.md └── default.vue ├── lib └── wp.js ├── middleware └── README.md ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── index.vue └── posts │ └── _slug │ └── index.vue ├── plugins ├── README.md └── vue-filter-date.js ├── static ├── README.md └── favicon.ico └── store ├── README.md └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 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 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: {}, 15 | globals: {} 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # WP config 14 | wpconfig.js 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt-wp 2 | 3 | > Nuxt.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 23 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /assets/css/base/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100%; 3 | background: #EDEDED; 4 | } 5 | -------------------------------------------------------------------------------- /assets/css/base/_reboot.scss: -------------------------------------------------------------------------------- 1 | // scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix 2 | 3 | // Reboot 4 | // 5 | // Normalization of HTML elements, manually forked from Normalize.css to remove 6 | // styles targeting irrelevant browsers while applying new styles. 7 | // 8 | // Normalize is licensed MIT. https://github.com/necolas/normalize.css 9 | 10 | 11 | // Document 12 | // 13 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. 14 | // 2. Change the default font family in all browsers. 15 | // 3. Correct the line height in all browsers. 16 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. 17 | // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so 18 | // we force a non-overlapping, non-auto-hiding scrollbar to counteract. 19 | // 6. Change the default tap highlight to be completely transparent in iOS. 20 | 21 | html { 22 | box-sizing: border-box; // 1 23 | font-family: sans-serif; // 2 24 | line-height: 1.15; // 3 25 | -webkit-text-size-adjust: 100%; // 4 26 | -ms-text-size-adjust: 100%; // 4 27 | -ms-overflow-style: scrollbar; // 5 28 | -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 29 | } 30 | 31 | *, 32 | *::before, 33 | *::after { 34 | box-sizing: inherit; // 1 35 | } 36 | 37 | // IE10+ doesn't honor `` in some cases. 38 | @at-root { 39 | @-ms-viewport { width: device-width; } 40 | } 41 | 42 | // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) 43 | article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { 44 | display: block; 45 | } 46 | 47 | // Body 48 | // 49 | // 1. Remove the margin in all browsers. 50 | // 2. As a best practice, apply a default `background-color`. 51 | 52 | body { 53 | margin: 0; // 1 54 | font-family: $font-family-base; 55 | font-size: $font-size-base; 56 | font-weight: $font-weight-base; 57 | line-height: $line-height-base; 58 | color: $body-color; 59 | background-color: $body-bg; // 2 60 | } 61 | 62 | // Suppress the focus outline on elements that cannot be accessed via keyboard. 63 | // This prevents an unwanted focus outline from appearing around elements that 64 | // might still respond to pointer events. 65 | // 66 | // Credit: https://github.com/suitcss/base 67 | [tabindex="-1"]:focus { 68 | outline: none !important; 69 | } 70 | 71 | 72 | // Content grouping 73 | // 74 | // 1. Add the correct box sizing in Firefox. 75 | // 2. Show the overflow in Edge and IE. 76 | 77 | hr { 78 | box-sizing: content-box; // 1 79 | height: 0; // 1 80 | overflow: visible; // 2 81 | } 82 | 83 | 84 | // 85 | // Typography 86 | // 87 | 88 | // Remove top margins from headings 89 | // 90 | // By default, `

`-`

` all receive top and bottom margins. We nuke the top 91 | // margin for easier control within type scales as it avoids margin collapsing. 92 | h1, h2, h3, h4, h5, h6 { 93 | margin-top: 0; 94 | margin-bottom: .5rem; 95 | } 96 | 97 | // Reset margins on paragraphs 98 | // 99 | // Similarly, the top margin on `

`s get reset. However, we also reset the 100 | // bottom margin to use `rem` units instead of `em`. 101 | p { 102 | margin-top: 0; 103 | margin-bottom: 1rem; 104 | } 105 | 106 | // Abbreviations 107 | // 108 | // 1. Remove the bottom border in Firefox 39-. 109 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 110 | // 3. Add explicit cursor to indicate changed behavior. 111 | // 4. Duplicate behavior to the data-* attribute for our tooltip plugin 112 | 113 | abbr[title], 114 | abbr[data-original-title] { // 4 115 | text-decoration: underline; // 2 116 | text-decoration: underline dotted; // 2 117 | cursor: help; // 3 118 | border-bottom: 0; // 1 119 | } 120 | 121 | address { 122 | margin-bottom: 1rem; 123 | font-style: normal; 124 | line-height: inherit; 125 | } 126 | 127 | ol, 128 | ul, 129 | dl { 130 | margin-top: 0; 131 | margin-bottom: 1rem; 132 | } 133 | 134 | ol ol, 135 | ul ul, 136 | ol ul, 137 | ul ol { 138 | margin-bottom: 0; 139 | } 140 | 141 | dt { 142 | font-weight: $dt-font-weight; 143 | } 144 | 145 | dd { 146 | margin-bottom: .5rem; 147 | margin-left: 0; // Undo browser default 148 | } 149 | 150 | blockquote { 151 | margin: 0 0 1rem; 152 | } 153 | 154 | dfn { 155 | font-style: italic; // Add the correct font style in Android 4.3- 156 | } 157 | 158 | b, 159 | strong { 160 | font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari 161 | } 162 | 163 | small { 164 | font-size: 80%; // Add the correct font size in all browsers 165 | } 166 | 167 | // 168 | // Prevent `sub` and `sup` elements from affecting the line height in 169 | // all browsers. 170 | // 171 | 172 | sub, 173 | sup { 174 | position: relative; 175 | font-size: 75%; 176 | line-height: 0; 177 | vertical-align: baseline; 178 | } 179 | 180 | sub { bottom: -.25em; } 181 | sup { top: -.5em; } 182 | 183 | 184 | // 185 | // Links 186 | // 187 | 188 | a { 189 | color: $link-color; 190 | text-decoration: $link-decoration; 191 | background-color: transparent; // Remove the gray background on active links in IE 10. 192 | -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. 193 | 194 | &:hover { 195 | color: $link-hover-color; 196 | text-decoration: $link-hover-decoration; 197 | } 198 | } 199 | 200 | // And undo these styles for placeholder links/named anchors (without href) 201 | // which have not been made explicitly keyboard-focusable (without tabindex). 202 | // It would be more straightforward to just use a[href] in previous block, but that 203 | // causes specificity issues in many other styles that are too complex to fix. 204 | // See https://github.com/twbs/bootstrap/issues/19402 205 | 206 | a:not([href]):not([tabindex]) { 207 | color: inherit; 208 | text-decoration: none; 209 | 210 | &:hover { 211 | color: inherit; 212 | text-decoration: none; 213 | } 214 | 215 | &:focus { 216 | color: inherit; 217 | text-decoration: none; 218 | outline: 0; 219 | } 220 | } 221 | 222 | 223 | // 224 | // Code 225 | // 226 | 227 | pre, 228 | code, 229 | kbd, 230 | samp { 231 | font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. 232 | font-size: 1em; // Correct the odd `em` font sizing in all browsers. 233 | } 234 | 235 | pre { 236 | // Remove browser default top margin 237 | margin-top: 0; 238 | // Reset browser default of `1em` to use `rem`s 239 | margin-bottom: 1rem; 240 | // Don't allow content to break outside 241 | overflow: auto; 242 | } 243 | 244 | 245 | // 246 | // Figures 247 | // 248 | 249 | figure { 250 | // Apply a consistent margin strategy (matches our type styles). 251 | margin: 0 0 1rem; 252 | } 253 | 254 | 255 | // 256 | // Images and content 257 | // 258 | 259 | img { 260 | vertical-align: middle; 261 | border-style: none; // Remove the border on images inside links in IE 10-. 262 | } 263 | 264 | svg:not(:root) { 265 | overflow: hidden; // Hide the overflow in IE 266 | } 267 | 268 | 269 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. 270 | // 271 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 272 | // DON'T remove the click delay when `` is present. 273 | // However, they DO support removing the click delay via `touch-action: manipulation`. 274 | // See: 275 | // * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch 276 | // * http://caniuse.com/#feat=css-touch-action 277 | // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay 278 | 279 | a, 280 | area, 281 | button, 282 | [role="button"], 283 | input, 284 | label, 285 | select, 286 | summary, 287 | textarea { 288 | touch-action: manipulation; 289 | } 290 | 291 | 292 | // 293 | // Tables 294 | // 295 | 296 | table { 297 | border-collapse: collapse; // Prevent double borders 298 | } 299 | 300 | caption { 301 | padding-top: $table-cell-padding; 302 | padding-bottom: $table-cell-padding; 303 | color: $text-muted; 304 | text-align: left; 305 | caption-side: bottom; 306 | } 307 | 308 | th { 309 | // Matches default `` alignment 310 | text-align: left; 311 | } 312 | 313 | 314 | // 315 | // Forms 316 | // 317 | 318 | label { 319 | // Allow labels to use `margin` for spacing. 320 | display: inline-block; 321 | margin-bottom: .5rem; 322 | } 323 | 324 | // Work around a Firefox/IE bug where the transparent `button` background 325 | // results in a loss of the default `button` focus styles. 326 | // 327 | // Credit: https://github.com/suitcss/base/ 328 | button:focus { 329 | outline: 1px dotted; 330 | outline: 5px auto -webkit-focus-ring-color; 331 | } 332 | 333 | input, 334 | button, 335 | select, 336 | optgroup, 337 | textarea { 338 | margin: 0; // Remove the margin in Firefox and Safari 339 | font-family: inherit; 340 | font-size: inherit; 341 | line-height: inherit; 342 | } 343 | 344 | button, 345 | input { 346 | overflow: visible; // Show the overflow in Edge 347 | } 348 | 349 | button, 350 | select { 351 | text-transform: none; // Remove the inheritance of text transform in Firefox 352 | } 353 | 354 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 355 | // controls in Android 4. 356 | // 2. Correct the inability to style clickable types in iOS and Safari. 357 | button, 358 | html [type="button"], // 1 359 | [type="reset"], 360 | [type="submit"] { 361 | -webkit-appearance: button; // 2 362 | } 363 | 364 | // Remove inner border and padding from Firefox, but don't restore the outline like Normalize. 365 | button::-moz-focus-inner, 366 | [type="button"]::-moz-focus-inner, 367 | [type="reset"]::-moz-focus-inner, 368 | [type="submit"]::-moz-focus-inner { 369 | padding: 0; 370 | border-style: none; 371 | } 372 | 373 | input[type="radio"], 374 | input[type="checkbox"] { 375 | box-sizing: border-box; // 1. Add the correct box sizing in IE 10- 376 | padding: 0; // 2. Remove the padding in IE 10- 377 | } 378 | 379 | 380 | input[type="date"], 381 | input[type="time"], 382 | input[type="datetime-local"], 383 | input[type="month"] { 384 | // Remove the default appearance of temporal inputs to avoid a Mobile Safari 385 | // bug where setting a custom line-height prevents text from being vertically 386 | // centered within the input. 387 | // See https://bugs.webkit.org/show_bug.cgi?id=139848 388 | // and https://github.com/twbs/bootstrap/issues/11266 389 | -webkit-appearance: listbox; 390 | } 391 | 392 | textarea { 393 | overflow: auto; // Remove the default vertical scrollbar in IE. 394 | // Textareas should really only resize vertically so they don't break their (horizontal) containers. 395 | resize: vertical; 396 | } 397 | 398 | fieldset { 399 | // Browsers set a default `min-width: min-content;` on fieldsets, 400 | // unlike e.g. `

`s, which have `min-width: 0;` by default. 401 | // So we reset that to ensure fieldsets behave more like a standard block element. 402 | // See https://github.com/twbs/bootstrap/issues/12359 403 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements 404 | min-width: 0; 405 | // Reset the default outline behavior of fieldsets so they don't affect page layout. 406 | padding: 0; 407 | margin: 0; 408 | border: 0; 409 | } 410 | 411 | // 1. Correct the text wrapping in Edge and IE. 412 | // 2. Correct the color inheritance from `fieldset` elements in IE. 413 | legend { 414 | display: block; 415 | width: 100%; 416 | max-width: 100%; // 1 417 | padding: 0; 418 | margin-bottom: .5rem; 419 | font-size: 1.5rem; 420 | line-height: inherit; 421 | color: inherit; // 2 422 | white-space: normal; // 1 423 | } 424 | 425 | progress { 426 | vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. 427 | } 428 | 429 | // Correct the cursor style of increment and decrement buttons in Chrome. 430 | [type="number"]::-webkit-inner-spin-button, 431 | [type="number"]::-webkit-outer-spin-button { 432 | height: auto; 433 | } 434 | 435 | [type="search"] { 436 | // This overrides the extra rounded corners on search inputs in iOS so that our 437 | // `.form-control` class can properly style them. Note that this cannot simply 438 | // be added to `.form-control` as it's not specific enough. For details, see 439 | // https://github.com/twbs/bootstrap/issues/11586. 440 | outline-offset: -2px; // 2. Correct the outline style in Safari. 441 | -webkit-appearance: none; 442 | } 443 | 444 | // 445 | // Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 446 | // 447 | 448 | [type="search"]::-webkit-search-cancel-button, 449 | [type="search"]::-webkit-search-decoration { 450 | -webkit-appearance: none; 451 | } 452 | 453 | // 454 | // 1. Correct the inability to style clickable types in iOS and Safari. 455 | // 2. Change font properties to `inherit` in Safari. 456 | // 457 | 458 | ::-webkit-file-upload-button { 459 | font: inherit; // 2 460 | -webkit-appearance: button; // 1 461 | } 462 | 463 | // 464 | // Correct element displays 465 | // 466 | 467 | output { 468 | display: inline-block; 469 | } 470 | 471 | summary { 472 | display: list-item; // Add the correct display in all browsers 473 | } 474 | 475 | template { 476 | display: none; // Add the correct display in IE 477 | } 478 | 479 | // Always hide an element with the `hidden` HTML attribute (from PureCSS). 480 | // Needed for proper display in IE 10-. 481 | [hidden] { 482 | display: none !important; 483 | } 484 | -------------------------------------------------------------------------------- /assets/css/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // Reboot Variables 2 | 3 | $white: #fff !default; 4 | $gray-100: #f8f9fa !default; 5 | $gray-200: #e9ecef !default; 6 | $gray-300: #dee2e6 !default; 7 | $gray-400: #ced4da !default; 8 | $gray-500: #adb5bd !default; 9 | $gray-600: #868e96 !default; 10 | $gray-700: #495057 !default; 11 | $gray-800: #343a40 !default; 12 | $gray-900: #212529 !default; 13 | $black: #000 !default; 14 | 15 | $font-family-base: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; 16 | $font-size-base: 1rem !default; 17 | $font-weight-base: normal; 18 | $line-height-base: 1.5 !default; 19 | 20 | $body-bg: $white !default; 21 | $body-color: $gray-900 !default; 22 | 23 | $dt-font-weight: bold !default; 24 | 25 | $link-color: rgb(6, 21, 224) !default; 26 | $link-decoration: none !default; 27 | $link-hover-color: darken($link-color, 15%) !default; 28 | $link-hover-decoration: underline !default; 29 | 30 | $table-cell-padding: .75rem !default; 31 | $text-muted: $gray-600 !default; 32 | -------------------------------------------------------------------------------- /assets/css/components/_components.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background: #FFFFFF; 3 | border: 1px solid #B3B3B3; 4 | box-shadow: 2px 0 10px 0 rgba(0,0,0,0.32), -2px 4px 10px 0 rgba(0,0,0,0.29); 5 | border-radius: 10px; 6 | padding: 1rem 1.25rem; 7 | } 8 | -------------------------------------------------------------------------------- /assets/css/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-left: auto; 3 | margin-right: auto; 4 | width: 90%; 5 | max-width: 1080px; 6 | } 7 | 8 | .main-contents { 9 | margin-top: -3.5rem; 10 | } 11 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | @import 'base/variables'; 2 | @import 'base/reboot'; 3 | @import 'base/base'; 4 | 5 | @import 'layout/layout'; 6 | 7 | @import 'components/components'; 8 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/layout/BlogHeader.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | 56 | 57 | -------------------------------------------------------------------------------- /components/posts/PostContents.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 65 | -------------------------------------------------------------------------------- /components/posts/PostList.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 34 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /lib/wp.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable camelcase */ 2 | import axios from 'axios' 3 | import { 4 | WP_SITE_URL, 5 | WP_HOMEPAGE_LIMIT 6 | } from '../wpconfig' 7 | 8 | class WpApi { 9 | constructor (siteurl) { 10 | this.apiBase = `${siteurl}/wp-json` 11 | } 12 | 13 | siteData () { 14 | return axios.get(this.apiBase) 15 | .then(json => { 16 | const { name, description, url, home, gmt_offset, timezone_string } = json.data 17 | return { site_data: { name, description, url, home, gmt_offset, timezone_string } } 18 | }) 19 | .catch(e => ({ error: e })) 20 | } 21 | 22 | posts (options) { 23 | const params = { 24 | page: 1, 25 | per_page: WP_HOMEPAGE_LIMIT, 26 | ...options 27 | } 28 | return axios.get(`${this.apiBase}/wp/v2/posts`, { params }) 29 | .then(json => { 30 | return { posts: json.data } 31 | }) 32 | .catch(e => ({ error: e })) 33 | } 34 | 35 | authors (options) { 36 | const params = { 37 | page: 1, 38 | per_page: 20, 39 | ...options 40 | } 41 | return axios.get(`${this.apiBase}/wp/v2/users`, { params }) 42 | .then(json => { 43 | return { users: json.data } 44 | }) 45 | .catch(e => ({ error: e })) 46 | } 47 | } 48 | 49 | const wp = new WpApi(WP_SITE_URL) 50 | 51 | export default wp 52 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: ['@/assets/css/style.scss'], 3 | /* 4 | ** Headers of the page 5 | */ 6 | head: { 7 | title: 'nuxt-wp', 8 | meta: [ 9 | { charset: 'utf-8' }, 10 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 11 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 12 | ], 13 | link: [ 14 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 15 | { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,600i,900' } 16 | ] 17 | }, 18 | /* 19 | ** Customize the progress bar color 20 | */ 21 | loading: { color: '#3B8070' }, 22 | /* 23 | ** Build configuration 24 | */ 25 | build: { 26 | vendor: [ 27 | 'axios', 28 | 'date-fns' 29 | ], 30 | /* 31 | ** Run ESLint on save 32 | */ 33 | extend (config, ctx) { 34 | if (ctx.dev && ctx.isClient) { 35 | config.module.rules.push({ 36 | enforce: 'pre', 37 | test: /\.(js|vue)$/, 38 | loader: 'eslint-loader', 39 | exclude: /(node_modules)/ 40 | }) 41 | } 42 | } 43 | }, 44 | plugins: ['~/plugins/vue-filter-date'] 45 | } 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-wp", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Shaun Kelly ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.19.0", 17 | "date-fns": "^1.29.0", 18 | "nuxt": "^1.0.0-rc11" 19 | }, 20 | "devDependencies": { 21 | "babel-eslint": "^7.2.3", 22 | "eslint": "^4.3.0", 23 | "eslint-config-standard": "^10.2.1", 24 | "eslint-loader": "^1.9.0", 25 | "eslint-plugin-html": "^3.1.1", 26 | "eslint-plugin-import": "^2.7.0", 27 | "eslint-plugin-node": "^5.1.1", 28 | "eslint-plugin-promise": "^3.5.0", 29 | "eslint-plugin-standard": "^3.0.1", 30 | "node-sass": "^4.5.3", 31 | "sass-loader": "^6.0.6" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | -------------------------------------------------------------------------------- /pages/posts/_slug/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 44 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /plugins/vue-filter-date.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import parse from 'date-fns/parse' 3 | import format from 'date-fns/format' 4 | 5 | Vue.filter('output-date', (input) => format(parse(input), 'MMMM D, YYYY h:mm a')) 6 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/6stringbeliever/nuxt_wp/eff07751822ac68e9a45e347b5a90f572a33e285/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | import wp from '~/lib/wp' 3 | 4 | // Mutation Types 5 | export const types = { 6 | SITE_DATA_UPDATE: 'SITE_DATA_UPDATE', 7 | POST_LIST_UPDATE: 'POST_LIST_UPDATE', 8 | AUTHORS_UPDATE: 'AUTHORS_UPDATE', 9 | CURRENT_POST_UPDATE: 'CURRENT_POST_UPDATE' 10 | } 11 | 12 | const createStore = () => { 13 | return new Vuex.Store({ 14 | state: { 15 | site_data: {}, 16 | post_list: [], 17 | authors: {}, 18 | current_post: {} 19 | }, 20 | mutations: { 21 | [types.SITE_DATA_UPDATE] (state, payload) { 22 | state.site_data = { ...payload } 23 | }, 24 | [types.POST_LIST_UPDATE] (state, payload) { 25 | state.post_list = [ ...payload ] 26 | }, 27 | [types.AUTHORS_UPDATE] (state, payload) { 28 | state.authors = { ...payload } 29 | }, 30 | [types.CURRENT_POST_UPDATE] (state, payload) { 31 | state.current_post = { ...payload } 32 | } 33 | }, 34 | actions: { 35 | nuxtServerInit ({ commit }) { 36 | const getSiteData = wp.siteData() 37 | .then(res => { 38 | commit(types.SITE_DATA_UPDATE, res.site_data) 39 | }) 40 | const getAuthors = wp.authors() 41 | .then(res => { 42 | const authors = res.users.reduce((out, val) => { 43 | return { 44 | ...out, 45 | [val.id]: val 46 | } 47 | }, {}) 48 | commit(types.AUTHORS_UPDATE, authors) 49 | }) 50 | return Promise.all([getSiteData, getAuthors]) 51 | } 52 | } 53 | }) 54 | } 55 | 56 | export default createStore 57 | --------------------------------------------------------------------------------