nuxtent version: "nuxtent": "^0.2.27",

I have a nuxtent project that I built by checking out the nuxtent-starter template project. I got nuxtent up and running with 1 content type:

module.exports = {
  content: {
    routeName: 'freelance-slug',
    permalink: 'freelance/:slug', 
    isPost: false    
  }
}

So, when I go to localhost:3000/freelance/foo I am showing data from /content/freelance/foo.md.

I am now trying to use multiple content types. The only thing that I change is my nuxtent.config.js file to the following:

module.exports = {
  content: {
    ['freelance', {
      routeName: 'freelance-slug',
      permalink: 'freelance/:slug', 
      isPost: false
    }],
    ["opensource", {
      routeName: "opensource-slug",
      permalink: "opensource/:slug",
      isPost: false
    }]
   ]
  }
}

Pretty simple here. Same configuration as before but adding another type, opensource.

When I run npm run dev with this configuration, I am getting the output:

> ./node_modules/nuxt/bin/nuxt

(node:59448) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): SyntaxError: Unexpected token ,
(node:59448) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError: Unexpected token ,

The build is unsuccessful with this error and I am not able to move beyond it.

Add support for yml files.

Getting the following warning:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Seems like the problem has to do with the way JSX plugin is rendering HTML, as the issue dissapears if the HTML is rendered via v-html directive in a vue template.

Opened issue on JSX: vuejs/babel-plugin-transform-vue-jsx#90

Current workaround is to check if body is a component or HTML, if it's a component use nuxtent-body, if its HTML use v-html:

For example:

component(v-if="isObject(post.body)" :is="post.body")
div(v-else v-html="post.body")

It looks like there might be an issue how IsAPI is being set within lib/plugin.js

https://github.com/nuxt-community/nuxtent-module/blob/master/lib/plugin.js#L35

when generating a static site isAPI is always true even when isClient is true. When serving the generated site via nginx the browser tries to load the "api" url rather than generated content one. I simply added the following, regenerated and it was good to go.

  if(isClient){
    isAPI = false;
  }

There is a way to automatically add the routes generated with nuxtent to the sitemap module?

Hi,

Is it possible to do something like that : https://learn.getgrav.org/cookbook/twig-recipes#list-the-last-5-recent-blog-posts, with the nuxtent-module ?
If it's possible how ? if I want display the last blogs post only about articles in "/example" folder ?

Thanks !

Assets directory: Imported styles throw an error and imported images don't load.

This is probably due to the fact that templates and styles are grabbed in advance which might interfere with usual loading. Will need to look into this.

While viewing the docs on rendering content, the docs show this code snippet that you put into your nuxt page:

async asyncData ({ app, route, payload }) {
  return {
    post: app.$content('/posts').get(route.path) || payload
  }
}

I entered this code into my nuxt page and it did not render the content from my .md file into the page.

I replaced the code snippet with the code snippet from the template project:

asyncData: async ({ app, route, payload }) => ({
    post: await app.$content('/posts').get(route.path) || payload
  })

With success.

I am not sure why this makes a difference? The syntax seems as though it should work either way, however, through my testing that does not seem to be the case.

Hello, I'm quite interested in what you're developing here, it's been on my list as well—not nearly as robust as what could come from this.

My problem is I can't seem to get it running anywhere [for future readers, it does operate fine on MacOS]. Either following your help documentation, using the 'examples' (after updating them to match the documentation), the 'docs', or using the nuxtent-starter quick-start (vue-cli init ..., npm install, then npm run dev).

I'm mainly focusing on the dev server, but also cannot get it running under build then start.

I cannot navigate between pages on either Linux or Windows, however on Linux if I get the SSR page directly it will load. There appears to be no error messages outputted.

Do you have a working example that I can tease out or perhaps there's something I'm missing?

[Note to future readers: both Linux and MacOS will work, as things are currently coded (17-07-21) you must load the dev server from localhost:3000 to avoid CORS errors as the content-api is loaded from local host, not 127.0.0.1]

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Right now they do not influence permalink. Only file name does.

Either add them to permalinks or add safe guard against conflicting names.

Caveat: not adding them leaves the flexibility of using nested sections as categories.

@pi0 @Atinux

Hey sorry for the delay haven't had much time this week. Here's an update on where I'm at right now.

The minimal requirement is down: you can create components based on markdown files and structure the conent based on a layout with template and styles and the front-matter data.

But there are three problems I haven't been able to fix:

• Unfortunately, Webpack limits how you can require assets, as the dependencies must be in the require('./content/someDir' + dynamicName + '.md') format, which limits the extent to which this module can abstract the fecthing of content.
• Asyncdata is resolved before templates are compiled. So you can't include the compiled components via the app context without the stand alone build. And you can't access the compiled components in the client, e.g. via vue mixin, because the content retrieved via Node API is not available.
• The content components work with nuxt build, but nuxt generate throws an unexpected token error which causes the process to fail. The documentation specify how to add dynamic routes, but not how to dynamically add nested routes, which might be the problem.

As @pi0 said from the beginning, doing it via server middleware and axios seems more feasible.

@znck Seems to have a working prototype of nuxt-blog-module. And if that is the case there is not use in repeating the work. Though it would be better l to have a more general solution that works for more than just blogs.

Let me know what you guys think and any input you may have on how to best procceed!

I setup a project with the nuxt-community/express-template and installed the nuxtent module (^0.2.27). When i now start the dev-server npm run dev nuxtent returns a 404 status code for all content pages. The same happens on the /content-api route.
When the project is started via the nuxt command everything works as expected.

Two problems:

1. If permalink becomes base route path, need to append '/' so that it can be a top level route.
2. Child content routes not being treated as optional.

the error msg when install axios

[email protected] requires a peer of @nuxtjs/axios@^2.1.0 but none was installed

So im working on a quite big site that is very content heavy, however I will definitely need to add i18n to support multiple languages. Is it possible to use it with Nuxtent, and any tips on how?

Thanks in advance

here is my config in nuxtent.config.js

module.exports = {
  content: {
    page: 'blog/_slug',
    permalink: ':slug',
    isPost: false,
    generate: [
      'get',
      'getAll'
    ]
  },

  api: {
    baseURL: process.env.NODE_ENV === 'production'
      ? 'http://wi-cuckoo.github.io'
      : 'http://localhost:3000'
  }
}

then the error occurred, why

On my site that I am using Nuxtent with, here is an example Nuxtjs page that I have:

<template lang="pug">
  .w-100
    Navbar
    h1  {{ post.title }}
    nuxtent-body(:body="post.body")
</template>

<script>
import Navbar from '~components/Navbar.vue'

export default {
  components: {
    Navbar
  },
  asyncData: async ({ app, route, payload }) => ({
    post: await app.$content('/freelance').get(route.path) || payload
  })
}
</script>

<style lang="scss">
@import "~assets/css/main.scss";
</style>

When I browse to 127.0.0.1:3000/freelance/projectname, I successfully see the content from my .md file: content/freelance/projectname. Nuxtent is setup correct there.

Now, here is the problem.

In my page template HTML, if I specify Vuejs components before <nuxtent-body>, those Vuejs components get removed when the browser renders the page.

<template lang="pug">
  .w-100
    Navbar <------ When refresh my webpage, I do *not* see this HTML in the resulting screen. 
    h1  {{ post.title }} <--- I see this. 
    nuxtent-body(:body="post.body") <---- And I see this. 
</template>

Here is the resulting screen in my browser:

with the Vue dev browser plugin output. It says that my Navbar component is added to the page?

Now, if I add the Navbar component after <nuxtent-body>, then the component shows up on the page:

<template lang="pug">
  .w-100
    h1  {{ post.title }}
    nuxtent-body(:body="post.body")
   Navbar <---- Move this below nuxtent-body
</template>

Here is the resulting screen in my browser:

You can see my Navbar now.

*side note: Notice that in this screenshot above ^^^^ you cannot see the word "Static" anymore. I tried to add some CSS to the <nuxtent-body> tag to add some padding to the top so that my Navbar would not cover up any content (the Navbar component is fixed positioning to the top) and none of the CSS properties stayed in tact on the <nuxtent-body> component. They all got removed.

When I load up my browser, for a split second I can see my Navbar and the CSS styles. It is after the async operation is complete fetching the post content that nuxtent removes everything.

Goal: I want to be able to have Vuejs components above <nuxtent-body> so that I can style my content pages.

Also need to include filename data, such as date, permalink, etc. into the component's data

Hi,

Having some issues with adding multiple content types,

when i add more than 3 types, it will complain:

Unhandled promise rejection (rejection id: 2): TypeError: Expected "slug" to match "[^\/]+?", but received "",

and with 3 of them, the first two will try to use the last added template. so keeps failing when going to that specific route.

How ever can still list them on the product pages just fine, it fetches the permalink, thumbnail and title of that route.

Any ideas of what it could be?

module.exports = { srcDir: '../content', dirs: [ ['first', { routeName: 'first', permalink: 'games/:slug', isPost: false }], ['second', { routeName: 'second', permalink: 'games/:slug', isPost: false }], ['third', { routeName: 'third', permalink: 'games/:slug', isPost: false }], ['third', { routeName: 'tablegame', permalink: 'games/:slug', isPost: false }] ] }

btw, any good way to nest several types under one main category?

I have a site that is pretty content heavy with over 40 .md files in 9 different sections. When I go to compile the site, it takes about a minute for nuxt to start serving my site. After I view the site, visit a few links, make 1 or 2 changes to content in my site, nuxt will crash.

Below is the stacktrace. Not sure if it's nuxtjs, nuxtent-module, node, etc.

nuxtjs version: latest
nuxtent-module version: 0.2.27
node version: v6.9.1

 WAIT  Compiling...                                                             2:47:01 PM


  build [==================  ] 91%
<--- Last few GCs --->

  227259 ms: Mark-sweep 1247.6 (1403.0) -> 1247.6 (1404.0) MB, 171.9 / 0.0 ms [allocation failure] [GC in old space requested].
  227432 ms: Mark-sweep 1247.6 (1404.0) -> 1247.6 (1404.0) MB, 172.8 / 0.0 ms [allocation failure] [GC in old space requested].
  227629 ms: Mark-sweep 1247.6 (1404.0) -> 1247.6 (1403.0) MB, 197.2 / 0.0 ms [last resort gc].
  227838 ms: Mark-sweep 1247.6 (1403.0) -> 1247.6 (1403.0) MB, 208.9 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x3954433cfb51 <JS Object>
    1: parse [native json.js:~61] [pc=0x18eedabf5ac1] (this=0x3954433c9111 <a JSON with map 0x6a7f280a0e1>,C=0x22399de04201 <Very long string[73798854]>,w=0x395443304381 <undefined>)
    2: arguments adaptor frame: 1->2
    3: handler(aka watchHandler) [/Users/levibostian/code/levibostian.com/node_modules/nuxt/dist/nuxt.js:1145] [pc=0x18eedb467a6c] (this=0x221676920771 <a Watching with map 0x7a...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 5: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
 6: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
 7: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
 8: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
 9: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
10: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
11: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
12: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
13: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
14: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
15: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
16: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
17: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
18: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
19: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
20: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
21: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
22: v8::internal::JsonParser<false>::ParseJsonObject() [/usr/local/bin/node]
23: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
24: v8::internal::JsonParser<false>::ParseJsonObject() [/usr/local/bin/node]
25: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
26: v8::internal::JsonParser<false>::ParseJson() [/usr/local/bin/node]
27: v8::internal::Runtime_ParseJson(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
28: 0x18eeca0092a7
29: 0x18eedabf5ac1
30: 0x18eeca009895
31: 0x18eedb467a6c

Hi!

I wanted to try examples, so I downloaded your repo, went in "single-content-type" folder and tried npm i, but got error.
Looks like in your package.json you set a dependency like
"nuxtent": "file:///Users/acastano/Sites/nuxt/nuxtent"
which, of course, doesn't work.
Same is for other examples.
I'm nue to Nuxt and your project looks very interesting. Can you please update the examples?

I upgraded my site to the newest version of nuxtent (v0.2.57). When I run nuxt build, my site successfully builds and the command succeeds.

When I then run nuxt start, my nuxt server starts up successfully and listens for me to connect.

When I open my browser, open up to 127.0.0.1:3000/ like I have it configured to, I successfully call the nuxt web server and it begins fetching data and rendering to me successfully. This is good because in a previous version of nuxtent, my site was not working giving me the error:

site_1  | [Vue warn]: Error in render function: "TypeError: Cannot read property 'sort' of undefined"
site_1  |
site_1  | found in
site_1  |
site_1  | ---> <Anonymous>
site_1  |        <Nuxt>
site_1  |          <Anonymous>
site_1  |            <Root>

This seems to be solved in the newest version of nuxtent. However, my browser tab seems to stall. My application in the browser runs out of memory. The progress bar of my browser tab continuously spins, I cannot scroll at all, cannot click anything on my webpage. I cannot do anything. I open up the console, nothing is outputting.

If I close the browser tab within ~5 seconds I am able to wait a couple seconds and then my browser will close the tab. If I wait >10 seconds, however, my browser gets killed. I cannot go to different tabs, I cannot do anything with my browser and I have to force kill the tab.

The output of nuxt doesn't seem to be too weird:

/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
/content-api GET http://127.0.0.1:3000/
   Response sent successfully.
  nuxt:render Data fetching /: 186ms +191ms
  nuxt:render Rendering url /undefined +1s
/content-api GET http://127.0.0.1:3000/undefined
   Page not found.
  nuxt:render Data fetching /undefined: 8ms +14ms

No warnings or errors.

You can pull/view my code on this branch and this commit to see for yourself if you wish.

They need to be interpreted as raw text so that it does not cause errors.

Using async components inside loaders is exhibiting weird, inconsistent behavior.

This method only works if the project is in the same directory as Nuxt root.

components {
   SomeComponent: () => import('~components/someComponent') 
}

This method works even if the directory is not the same as Nuxt root, but it's not async.

components {
   SomeComponent: require(["~components/${name + ext}"])
}

So I used guards to check if the directories matched to choose which method to use, but of course, even though the first method worked in the same directory as the package, when I tried to test it externally, it didn't work (import was an unexpected token).

Only this third approach worked in an external directory.

components {
   SomeComponent: `(resolve) => require(["~components/${name + ext}"], resolve)`
}

But even if it worked with nuxt dev, it failed when I tried to run it with nuxt generate...

ERROR in nuxt.bundle.3107bd9208454be22be2.js from UglifyJs
Unexpected token: punc ([) [nuxt.bundle.3107bd9208454be22be2.js:1191,4]

Hmm..

Only the standard approach so far works in all situations:

import SomeComponent from '~component/someComponent'

export default {
  components: {
    SomeComponet
  }
}

Not sure if this is an issue with Nuxt, with Vue loader, or with the usage of dynamic imports inside loaders.

Going to stick the fourth approach in the meantime.

So that you can include, exclude, filter, map etc. and return the processed output.

Ex:

content: {
routes: {
   getAll: { 
       name: 'route-name', 
       process: (pages) =>{
         // e.g. include or exlcude data
       }
     },
    query: {
        name: 'another-route',
        process: (pages) => {
         // e.g. filter pages
       }
    }
 }
}

For some reason, the content layout files are not being automatically updated when changed even though hot module replacement does work for the markdown files inside the content directories.

@pi0 @Atinux Does Nuxt handle this differently for layouts?