nuxt-community / nuxtent-module Goto Github PK
View Code? Open in Web Editor NEWSeamlessly use content files in your Nuxt.js sites.
Home Page: https://nuxtent-module.netlify.com/guide
License: MIT License
Seamlessly use content files in your Nuxt.js sites.
Home Page: https://nuxtent-module.netlify.com/guide
License: MIT License
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.
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
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
}
}
}
}
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]
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
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?
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 !
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.
🚨 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.
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;
}
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.
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")
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.
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.
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:
require('./content/someDir' + dynamicName + '.md'
) format, which limits the extent to which this module can abstract the fecthing of content.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!
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.
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?
[email protected] requires a peer of @nuxtjs/axios@^2.1.0 but none was installed
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.