├── .gitignore
├── LICENSE
├── README.md
├── layouts
    └── default.vue
├── nuxt.config.js
├── package.json
├── pages
    ├── articles
    │   ├── _slug.vue
    │   └── index.vue
    └── index.vue
├── plugins
    └── preview.client.js
├── static
    └── favicon.ico
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Sébastien Chopin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # nuxt-static-demo
2 | 
3 | Demo of using Strapi and Full Static with preview
4 | 
5 | Online demo: https://nsd.vercel.app
6 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <header>
 4 |       <NuxtLink to="/">Home</NuxtLink> /
 5 |       <NuxtLink to="/articles">Articles</NuxtLink>
 6 |     </header>
 7 |     <Nuxt/>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   head: {
14 |     meta: [
15 |       { charset: 'utf-8' },
16 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
17 |     ],
18 |     link: [
19 |       { rel: 'stylesheet', href: 'https://fonts.xz.style/serve/inter.css' },
20 |       { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css' }
21 |     ]
22 |   }
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   target: 'static',
 3 |   modules: ['@nuxtjs/strapi'],
 4 |   plugins: ['~/plugins/preview.client.js'],
 5 |   strapi: {
 6 |     url: 'https://atinux-strapi.herokuapp.com',
 7 |     entities: ['pages', 'articles']
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-demo",
 3 |   "license": "MIT",
 4 |   "scripts": {
 5 |     "dev": "nuxt",
 6 |     "generate": "nuxt generate",
 7 |     "start": "nuxt start"
 8 |   },
 9 |   "dependencies": {
10 |     "@nuxtjs/strapi": "^0.3.0",
11 |     "nuxt": "^2.14.12"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/articles/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>{{ article.title }}</h1>
 4 |     <img :src="article.imageUrl" />
 5 |     <p>{{ article.body }}</p>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   async asyncData({ params, $strapi }) {
12 |     const article = await $strapi.$articles.findOne(params.slug)
13 | 
14 |     return { article }
15 |   },
16 |   head() {
17 |     return {
18 |       title: this.article.title
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/pages/articles/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Articles</h1>
 4 |     <blockquote>Discover beautiful articles from Unsplash pictures.</blockquote>
 5 |     <article v-for="article of articles" :key="article.slug">
 6 |       <NuxtLink :to="`/articles/${article.slug}`">
 7 |         <h3>{{ article.title }}</h3>
 8 |         <img :src="article.imageUrl" width="150" />
 9 |       </NuxtLink>
10 |     </article>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   async asyncData({ $strapi }) {
17 |     const articles = await $strapi.$articles.find()
18 | 
19 |     return { articles }
20 |   },
21 |   head: {
22 |     title: 'Articles'
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>{{ page.title }}</h1>
 4 |     <p>{{ page.body }}</p>
 5 |     <blockquote>The source code is available on <a href="https://github.com/Atinux/nuxt-static-demo">GitHub</a></blockquote>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   async asyncData({ $strapi }) {
12 |     const page = await $strapi.$pages.findOne('index')
13 | 
14 |     return { page }
15 |   },
16 |   head() {
17 |     return {
18 |       title: this.page.title
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/plugins/preview.client.js:
--------------------------------------------------------------------------------
1 | export default ({ query, enablePreview }) => {
2 |   if (typeof query.preview !== 'undefined') {
3 |     console.log('PREVIEW MODE ENABLED')
4 |     enablePreview()
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-static-demo/6c4fef4968bd35f1fef4255800d7d8d4a0d7520f/static/favicon.ico


--------------------------------------------------------------------------------