├── .netlify
├── static
    ├── favicon.ico
    ├── posts.json
    ├── README.md
    ├── dynamicMarkdownFiles
    │   ├── test1.md
    │   ├── test3.md
    │   ├── test4.md
    │   └── test2.md
    └── markdownFiles
    │   └── HomeContent.md
├── .gitignore
├── middleware
    ├── test.js
    └── README.md
├── components
    ├── README.md
    ├── Logo.vue
    └── Header.vue
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── pages
    ├── README.md
    ├── markdown.vue
    ├── dynamic
    │   └── _slug.vue
    └── index.vue
├── assets
    ├── README.md
    └── css
    │   └── main.scss
├── .eslintrc.js
├── store
    ├── index.js
    └── README.md
├── plugins
    └── README.md
├── package.json
├── README.md
└── nuxt.config.js


/.netlify:
--------------------------------------------------------------------------------
1 | {"site_id":"251f11b4-ec86-4588-9f83-5ddb456deec7","path":"dist"}


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidroyer/nuxt-markdown-example/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/static/posts.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "title": "Test1",
 4 |     "slug": "test1"
 5 |   },
 6 |   {
 7 |     "title": "Test2",
 8 |     "slug": "test2"
 9 |   }
10 | ]
11 | 


--------------------------------------------------------------------------------
/middleware/test.js:
--------------------------------------------------------------------------------
1 | export default function ({store}) {
2 |   // If user not connected, redirect to /
3 |   if (store.state.menuIsActive === true) {
4 |     store.commit('toggleMenuState')
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | 
 3 | const createStore = () => {
 4 |   return new Vuex.Store({
 5 |     state: {
 6 |       menuIsActive: false
 7 |     },
 8 |     mutations: {
 9 |       toggleMenuState (state) {
10 |         state.menuIsActive = !state.menuIsActive
11 |       }
12 |     }
13 |   })
14 | }
15 | 
16 | export default createStore
17 | 


--------------------------------------------------------------------------------
/assets/css/main.scss:
--------------------------------------------------------------------------------
 1 | .page-enter-active,
 2 | .page-leave-active {
 3 |   transition: opacity 0.35s;
 4 | }
 5 | 
 6 | .page-enter,
 7 | .page-leave-active {
 8 |   opacity: 0;
 9 | }
10 | 
11 | .contentWrapper section {
12 |   padding: 1.25em;
13 | }
14 | 
15 | @media (max-width: 679px) {
16 |   .siteTitle {
17 |     font-size: 1.25em !important;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/pages/markdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container">
 3 |     <div>
 4 |       <h1 class="title">
 5 |         Markdown Main Page
 6 |       </h1>
 7 |       <h2 class="subtitle">
 8 |         Testing Netlify build
 9 |       </h2>
10 |       <div v-html="test"></div>
11 |     </div>
12 |   </section>
13 | </template>
14 | 
15 | <script>
16 | import test1 from '~static/dynamicMarkdownFiles/test1.md'
17 | 
18 | export default {
19 |   components: {
20 |   },
21 |   computed: {
22 |     test () {
23 |       return test1
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style>
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/static/dynamicMarkdownFiles/test1.md:
--------------------------------------------------------------------------------
 1 | An h1 header
 2 | ============
 3 | 
 4 | Paragraphs are separated by a blank line.
 5 | 
 6 | 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
 7 | look like:
 8 | 
 9 |   * this one
10 |   * that one
11 |   * the other one
12 | 
13 | Note that --- not considering the asterisk --- the actual text
14 | content starts at 4-columns in.
15 | 
16 | > Block quotes are
17 | > written like so.
18 | >
19 | > They can span multiple paragraphs,
20 | > if you like.
21 | 
22 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
23 | in chapters 12--14"). Three dots ... will be converted to an ellipsis.
24 | Unicode is supported. ☺
25 | 


--------------------------------------------------------------------------------
/static/dynamicMarkdownFiles/test3.md:
--------------------------------------------------------------------------------
 1 | This is Test3 file
 2 | ============
 3 | 
 4 | Paragraphs are separated by a blank line.
 5 | 
 6 | 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
 7 | look like:
 8 | 
 9 |   * this one
10 |   * that one
11 |   * the other one
12 | 
13 | Note that --- not considering the asterisk --- the actual text
14 | content starts at 4-columns in.
15 | 
16 | > Block quotes are
17 | > written like so.
18 | >
19 | > They can span multiple paragraphs,
20 | > if you like.
21 | 
22 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
23 | in chapters 12--14"). Three dots ... will be converted to an ellipsis.
24 | Unicode is supported. ☺
25 | 


--------------------------------------------------------------------------------
/static/dynamicMarkdownFiles/test4.md:
--------------------------------------------------------------------------------
 1 | This is Test4 file
 2 | ============
 3 | 
 4 | Paragraphs are separated by a blank line.
 5 | 
 6 | 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
 7 | look like:
 8 | 
 9 |   * this one
10 |   * that one
11 |   * the other one
12 | 
13 | Note that --- not considering the asterisk --- the actual text
14 | content starts at 4-columns in.
15 | 
16 | > Block quotes are
17 | > written like so.
18 | >
19 | > They can span multiple paragraphs,
20 | > if you like.
21 | 
22 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
23 | in chapters 12--14"). Three dots ... will be converted to an ellipsis.
24 | Unicode is supported. ☺
25 | 


--------------------------------------------------------------------------------
/static/markdownFiles/HomeContent.md:
--------------------------------------------------------------------------------
 1 | The markdown files for this example live in the directory **markdownFiles**, inside the **static** folder.
 2 | 
 3 | They are imported using webpack's import capability and loadered with the markdown-it module via [Nuxt.js modules](https://github.com/nuxt-community/modules).
 4 | 
 5 | This content you are reading at this very moment is actually a markdown file. It's titled home.md and can find it in the **markdownFiles** directory.
 6 | 
 7 | Inside the **markdownFiles** directory, you will find 2 other files
 8 | - test1.md
 9 | - test2.md
10 | 
11 | They are used to show the dynamic import ability of webpack and that can be seen in **dynamic/_slug.vue**
12 | Pretty cool huh?
13 | 


--------------------------------------------------------------------------------
/static/dynamicMarkdownFiles/test2.md:
--------------------------------------------------------------------------------
 1 | # An exhibit of Markdown
 2 | 
 3 | This note demonstrates some of what [Markdown][1] is capable of doing.
 4 | 
 5 | *Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
 6 | 
 7 | ## Basic formatting
 8 | 
 9 | Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
10 | 
11 | Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
12 | 
13 | ## Lists
14 | 
15 | ### Ordered list
16 | 
17 | 1. Item 1
18 | 2. A second item
19 | 3. Number 3
20 | 4. Ⅳ
21 | 


--------------------------------------------------------------------------------
/pages/dynamic/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |     <div :key="$route.params.slug">
 4 |       <section class="hero is-primary">
 5 |         <div class="hero-body">
 6 |           <div class="container">
 7 |             <h1 class="title">
 8 |               {{$route.params.slug}}
 9 |             </h1>
10 |             <h2 class="subtitle">
11 |               A dynamic markdown file
12 |             </h2>
13 |           </div>
14 |         </div>
15 |       </section>
16 |       <div class="container">
17 |         <div v-html="content" class="contentWrapper content"></div>
18 |       </div>
19 |     </div>
20 | 
21 | 
22 | 
23 | </template>
24 | 
25 | <script>
26 | 
27 | export default {
28 |   async asyncData ({params}) {
29 |     const fileContent = await import(`~/static/dynamicMarkdownFiles/${params.slug}.md`)
30 |     return {
31 |       content: fileContent
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | 
39 | </style>
40 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <section class="hero is-primary">
 4 |       <div class="hero-body">
 5 |         <div class="container">
 6 |           <h1 class="title">
 7 |             Markdown files with Nuxt.js
 8 |           </h1>
 9 |           <h2 class="subtitle">
10 |             Use a specfic file or dynamic importing
11 |           </h2>
12 |         </div>
13 |       </div>
14 |     </section>
15 |     <div class="container">
16 |       <!-- <logo/> -->
17 |       <div v-html="content" class="contentWrapper content"></div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Logo from '~components/Logo.vue'
24 | import HomeContent from '~static/markdownFiles/HomeContent.md'
25 | export default {
26 |   components: {
27 |     Logo
28 |   },
29 |   data () {
30 |     return {
31 |       content: HomeContent
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | 
39 | </style>
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-markdown-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "David Royer <droyer01@gmail.com>",
 6 |   "private": false,
 7 |   "dependencies": {
 8 |     "@nuxtjs/bulma": "^1.0.1",
 9 |     "@nuxtjs/font-awesome": "^1.0.1",
10 |     "@nuxtjs/markdownit": "^0.0.2",
11 |     "lodash": "^4.17.4",
12 |     "node-dir": "^0.1.17",
13 |     "node-sass": "^4.5.3",
14 |     "nuxt": "latest",
15 |     "nuxt-cli": "^0.0.1",
16 |     "sass-loader": "^6.0.6"
17 |   },
18 |   "scripts": {
19 |     "dev": "nuxt",
20 |     "build": "nuxt build",
21 |     "start": "nuxt start",
22 |     "generate": "nuxt generate",
23 |     "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
24 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
25 |     "precommit": "npm run lint"
26 |   },
27 |   "devDependencies": {
28 |     "babel-eslint": "^7.1.1",
29 |     "eslint": "^3.15.0",
30 |     "eslint-config-standard": "^6.2.1",
31 |     "eslint-loader": "^1.6.1",
32 |     "eslint-plugin-html": "^2.0.0",
33 |     "eslint-plugin-promise": "^3.4.1",
34 |     "eslint-plugin-standard": "^2.0.1",
35 |     "push-dir": "^0.4.1"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-markdown-example
 2 | 
 3 | > An example of using markdown files for content with Nuxt.js / Vue.js
 4 | 
 5 | The markdown files for this example live in the directory **markdownFiles**, inside the **static** folder.
 6 | 
 7 | They are imported using webpack's import capability and loadered with the markdown-it module via [Nuxt.js modules](https://github.com/nuxt-community/modules).
 8 | 
 9 | This content you are reading at this very moment is actually a markdown file. It's titled home.md and can find it in the **markdownFiles** directory.
10 | 
11 | Inside the **markdownFiles** directory, you will find 2 other files
12 | - test1.md
13 | - test2.md
14 | 
15 | They are used to show the dynamic import ability of webpack and that can be seen in **dynamic/_slug.vue**
16 | 
17 | ## Build Setup
18 | 
19 | ``` bash
20 | # install dependencies
21 | $ npm install # Or yarn install
22 | 
23 | # serve with hot reload at localhost:3000
24 | $ npm run dev
25 | 
26 | # build for production and launch server
27 | $ npm run build
28 | $ npm start
29 | 
30 | # generate static project
31 | $ npm run generate
32 | ```
33 | 
34 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
35 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <site-header></site-header>
 4 |     <nuxt/>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import SiteHeader from '~components/Header.vue'
 9 | 
10 | export default {
11 |   components: {
12 |     SiteHeader
13 |   },
14 |   beforeRouteLeave (to, from, next) {
15 |     console.log(this)
16 |     // this.menuIsActive = false
17 |     // called when the route that renders this component is about to
18 |     // be navigated away from.
19 |     // has access to `this` component instance.
20 |   }
21 | }
22 | </script>
23 | <style>
24 | .section {
25 |   padding: 1em;
26 | }
27 | 
28 | 
29 | html
30 | {
31 |   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
32 |   font-size: 16px;
33 |   word-spacing: 1px;
34 |   -ms-text-size-adjust: 100%;
35 |   -webkit-text-size-adjust: 100%;
36 |   -moz-osx-font-smoothing: grayscale;
37 |   -webkit-font-smoothing: antialiased;
38 |   box-sizing: border-box;
39 | }
40 | *, *:before, *:after
41 | {
42 |   box-sizing: border-box;
43 |   margin: 0;
44 | }
45 | .button--green
46 | {
47 |   display: inline-block;
48 |   border-radius: 4px;
49 |   border: 1px solid #3b8070;
50 |   color: #3b8070;
51 |   text-decoration: none;
52 |   padding: 10px 30px;
53 | }
54 | .button--green:hover
55 | {
56 |   color: #fff;
57 |   background-color: #3b8070;
58 | }
59 | .button--grey
60 | {
61 |   display: inline-block;
62 |   border-radius: 4px;
63 |   border: 1px solid #35495e;
64 |   color: #35495e;
65 |   text-decoration: none;
66 |   padding: 10px 30px;
67 |   margin-left: 15px;
68 | }
69 | .button--grey:hover
70 | {
71 |   color: #fff;
72 |   background-color: #35495e;
73 | }
74 | 
75 | /*
76 | From Index.vue
77 | */
78 | 
79 | 
80 | </style>
81 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"></div>
 4 |     <div class="Triangle Triangle--one"></div>
 5 |     <div class="Triangle Triangle--three"></div>
 6 |     <div class="Triangle Triangle--four"></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo
12 | {
13 |   display: inline-block;
14 |   animation: turn 2s linear forwards 1s;
15 |   transform: rotateX(180deg);
16 |   position: relative;
17 |   overflow: hidden;
18 |   height: 180px;
19 |   width: 245px;
20 | }
21 | .Triangle
22 | {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 0;
26 |   width: 0;
27 |   height: 0;
28 | }
29 | .Triangle--one
30 | {
31 |   border-left: 105px solid transparent;
32 |   border-right: 105px solid transparent;
33 |   border-bottom: 180px solid #41B883;
34 | }
35 | .Triangle--two
36 | {
37 |   top: 30px;
38 |   left: 35px;
39 |   animation: goright 0.5s linear forwards 3.5s;
40 |   border-left: 87.5px solid transparent;
41 |   border-right: 87.5px solid transparent;
42 |   border-bottom: 150px solid #3B8070;
43 | }
44 | .Triangle--three
45 | {
46 |   top: 60px;
47 |   left: 35px;
48 |   animation: goright 0.5s linear forwards 3.5s;
49 |   border-left: 70px solid transparent;
50 |   border-right: 70px solid transparent;
51 |   border-bottom: 120px solid #35495E;
52 | }
53 | .Triangle--four
54 | {
55 |   top: 120px;
56 |   left: 70px;
57 |   animation: godown 0.5s linear forwards 3s;
58 |   border-left: 35px solid transparent;
59 |   border-right: 35px solid transparent;
60 |   border-bottom: 60px solid #fff;
61 | }
62 | 
63 | @keyframes turn {
64 |   100% {
65 |     transform: rotateX(0deg);
66 |   }
67 | }
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | @keyframes goright {
74 |   100% {
75 |     left: 70px;
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <nav class="nav has-shadow">
 3 |       <div class="nav-left">
 4 |         <nuxt-link class="siteTitle nav-item" to="/">Nuxt Markdown Example</nuxt-link>
 5 |       </div>
 6 | 
 7 |       <!-- <div class="nav-center">
 8 |         <a class="nav-item">
 9 |           <span class="icon">
10 |             <i class="fa fa-github"></i>
11 |           </span>
12 |         </a>
13 |         <a class="nav-item">
14 |           <span class="icon">
15 |             <i class="fa fa-twitter"></i>
16 |           </span>
17 |         </a>
18 |       </div> -->
19 | 
20 |       <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
21 |       <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
22 | 
23 |         <span class="nav-toggle" :class="{'is-active': menuIsActive}" @click="$store.commit('toggleMenuState')">
24 |           <span></span>
25 |           <span></span>
26 |           <span></span>
27 |         </span>
28 | 
29 | 
30 |       <!-- This "nav-menu" is hidden on mobile -->
31 |       <!-- Add the modifier "is-active" to display it on mobile -->
32 |       <transition mode="out-in" name="slide" appear>
33 |         <div class="nav-right nav-menu" :class="{'is-active': menuIsActive}">
34 | 
35 |           <nuxt-link class="nav-item" to="/dynamic/test1">Post 1</nuxt-link>
36 |           <nuxt-link class="nav-item" to="/dynamic/test2">Post 2</nuxt-link>
37 |           <nuxt-link class="nav-item" to="/dynamic/test3">Post 3</nuxt-link>
38 |           <nuxt-link class="nav-item" to="/dynamic/test4">Post 4</nuxt-link>
39 | 
40 |           <div class="nav-item">
41 |             <div class="field is-grouped">
42 |               <p class="control">
43 |                 <a class="button is-primary" target="_blank" rel="noopener" href="https://github.com/davidroyer/nuxt-markdown-example">
44 |                   <span class="icon">
45 |                     <i class="fa fa-github"></i>
46 |                   </span>
47 |                   <span>Github Repoo</span>
48 |                 </a>
49 |               </p>
50 |             </div>
51 |           </div>
52 |         </div>
53 |       </transition>
54 |     </nav>
55 | </template>
56 | 
57 | <script>
58 | 
59 | import { mapState } from 'vuex'
60 | 
61 | export default {
62 |   data () {
63 |     return {
64 |       // menuIsActive: false
65 |     }
66 |   },
67 |   computed: mapState([
68 |     'menuIsActive'
69 |   ]),
70 |   methods: {
71 |     handleMenu () {
72 |       this.menuIsActive = false
73 |     },
74 |     testState () {
75 |       this.$store.commit('toggleMenuState')
76 |     }
77 |   }
78 | }
79 | </script>
80 | 
81 | <style lang="css">
82 | .siteTitle {
83 |   font-weight: 700;
84 |   font-size: 1.75em;
85 | }
86 | 
87 | .slide-enter-active,
88 | .slide-leave-active {
89 |   transition: opacity 0.35s;
90 | }
91 | 
92 | .slide-enter,
93 | .slide-leave-active {
94 |   opacity: 0;
95 | }
96 | 
97 | </style>
98 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | const { join } = require('path')
  2 | const dir = require('node-dir')
  3 | const routesArray = []
  4 | const fs = require('fs')
  5 | const _ = require('lodash')
  6 | 
  7 | var files = fs.readdirSync('./static/dynamicMarkdownFiles');
  8 | function createRoutesArray() {
  9 |   files.forEach(function (file) {
 10 |       var name = file.substr(0, file.lastIndexOf('.'));
 11 |       var route = '/dynamic/' + name
 12 |       routesArray.push(route)
 13 |   });
 14 | }
 15 | 
 16 | function returnRoutes() {
 17 |   dir.readFiles('./static/dynamicMarkdownFiles', {
 18 |         match: /.md$/,
 19 |         shortName: true,
 20 |         exclude: /^\./
 21 |         }, function(err, content, next) {
 22 |             if (err) throw err;
 23 |             // console.log('content:', content);
 24 |             next();
 25 |         },
 26 |         function(err, files){
 27 |             if (err) throw err;
 28 |             // fileNamesArray = [];
 29 |             files.forEach(function (file) {
 30 |                 var name = file.substr(0, file.lastIndexOf('.'));
 31 |                 var path = '/dynamic/' + name
 32 |                 return path
 33 |             });
 34 |         });
 35 | }
 36 | // const fs = require('fs')
 37 | // const axios = require('axios')
 38 | // // const _ = require('lodash')
 39 | 
 40 | //
 41 | function getSlugs(post, index) {
 42 |   let slug = post.substr(0, post.lastIndexOf('.'));
 43 |   return `/dynamic/${slug}`
 44 | }
 45 | //
 46 | const postsArray = require('./static/posts.json')
 47 | 
 48 | module.exports = {
 49 |   /*
 50 |   ** Headers of the page
 51 |   */
 52 |   head: {
 53 |     title: 'Nuxt Example - Markdown Files',
 54 |     meta: [
 55 |       { charset: 'utf-8' },
 56 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 57 |       { hid: 'description', name: 'description', content: 'Nuxt.js Example - Using Markdown Files by David Royer' }
 58 |     ],
 59 |     link: [
 60 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
 61 |     ]
 62 |   },
 63 |   /*
 64 |   ** Customize the progress-bar color
 65 |   */
 66 |   modules: [
 67 |     '@nuxtjs/bulma',
 68 |     '@nuxtjs/font-awesome',
 69 |     ['@nuxtjs/markdownit', { linkify: true } ]
 70 |     // {
 71 |     //   src: '@nuxtjs/markdownit',
 72 |     //   options: { linkify: true }
 73 |     // }
 74 |   ],
 75 |   loading: { color: '#3B8070' },
 76 |   /*
 77 |   ** Build configuration
 78 |   */
 79 |   css: [
 80 |     // 'hover.css/css/hover-min.css',
 81 |     // 'bulma/bulma.sass',
 82 |     join('~assets/css/main.scss')
 83 |   ],
 84 |   router: {
 85 |     middleware: 'test'
 86 |   },
 87 |   generate: {
 88 |     // routes: function() {
 89 |     //   returnRoutes()
 90 |     // }
 91 |     routes: function() {
 92 | 
 93 |         return files.map(getSlugs)
 94 |         // return _.map(routesArray, function(file) {
 95 |         //   let slug = file.substr(0, file.lastIndexOf('.'));
 96 |         //   return `/dynamic/${slug}`
 97 |         // })
 98 | 
 99 |       // return axios.get('~/static/posts.json')
100 |       // .then((res) => {
101 |       //   return _.map(res.data, function(post, key) {
102 |       //     return `/dynamic/${post.slug}`
103 |       //   })
104 |       //
105 |       // })
106 |     }
107 |   },
108 |   build: {
109 |     /*
110 |     ** Run ESLINT on save
111 |     */
112 |     extractCSS: true,
113 |     extend (config, ctx) {
114 |       if (ctx.isClient) {
115 |         config.module.rules.push({
116 |           enforce: 'pre',
117 |           test: /\.(js|vue)$/,
118 |           loader: 'eslint-loader',
119 |           exclude: /(node_modules)/
120 |         })
121 |       }
122 |     }
123 |   }
124 | }
125 | 


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