Comments (9)
Hey @janekkkk,
Nuxt Content parses markdown files on the file system on load and builds an API around the database generated from the content directory, it cannot be used on eternal sources.
You're alternative seems the way to go.
from content.
I also would like to be able to host my markdown files in Firebase Cloud Storage and fetch them at runtime via an API. I already figured out hot to dynamically generate the routes. The only thing I haven't figured out is how to parse the markdown into the tag. Some of my markdown files have vue components in them, so a 3rd party API isn't a feasible option for me.
from content.
I am still looking for this. It would be great if I can host and update my blog posts on a Github repository, instead of rebuilding the entire Nuxt project.
from content.
An easy solution to this is to simply fetch the external markdown files in a node script that runs before the build/export steps.
Fetch (or useaxios
or whatever) the files, save them in the content directory, and thennpm run build/export
everything from there.
I do this -- and it seems to work (in my case, at least). I'm building on Netlify. No issues with this approach.That's really interesting — if your external database updates (e.g. you have a new blog), how does that trigger Netlify to re-run the fetch script to build that new file into content directory, and then rebuild/re-export the Nuxt site?
I use Strapi as an external API/auth service -- but the way I've dealt with this sort of issue with Strapi is to send a build hook when the user adds new content and then updates a "build" task.
My use case for this is when new content is added or updated -- I ask users to insert a new build task (a content-type in Strapi). When they enter the new task -- a note and their initials -- Strapi sends a webhook to Netlify to initiate a build. I have a node file that runs as part of the build to update the search index. This node script generates an index for the entire site (including the new content item(s)) -- and then rebuilds everything. (I use fuse.js for the search.)
This approach works great -- no issues. The only thing I need to watch are my Netlify build minutes (about 60 seconds for each site) -- but I'm managing about 15 sites this way on Netlify without issues. (These are low-traffic but critical sites -- so that's why Netlify is perfect.)
from content.
I know the issue is closed, but I also wish there was a better way to use Nuxt Content's markdown features for external files. One solution is to use hmsk/frontmatter-markdown-loader, but I wish there was a way to do it using only Nuxt Content
from content.
An easy solution to this is to simply fetch the external markdown files in a node script that runs before the build/export steps.
Fetch (or use axios
or whatever) the files, save them in the content directory, and then npm run build/export
everything from there.
I do this -- and it seems to work (in my case, at least). I'm building on Netlify. No issues with this approach.
from content.
An easy solution to this is to simply fetch the external markdown files in a node script that runs before the build/export steps.
Fetch (or use
axios
or whatever) the files, save them in the content directory, and thennpm run build/export
everything from there.I do this -- and it seems to work (in my case, at least). I'm building on Netlify. No issues with this approach.
That's really interesting — if your external database updates (e.g. you have a new blog), how does that trigger Netlify to re-run the fetch script to build that new file into content directory, and then rebuild/re-export the Nuxt site?
from content.
I know the issue is closed, but I also wish there was a better way to use Nuxt Content's markdown features for external files. One solution is to use hmsk/frontmatter-markdown-loader, but I wish there was a way to do it using only Nuxt Content
Here's a quick example of how to load and build the /content
folder for Nuxt. This script runs independently of Nuxt, but can be added to the dev or build process as a script in package.json
.
- Create a
loadContent.js
script in your folder
const fetch = require("node-fetch");
const fs = require('fs');
console.log('>>> Loading External Content')
let url = 'https://your-url/api/content'
let path = './content/testfile.js'
const downloadFile = (async (url, path) => {
const res = await fetch(url);
const fileStream = fs.createWriteStream(path);
await new Promise((resolve, reject) => {
res.body.pipe(fileStream);
res.body.on("error", (err) => {
reject(err);
});
fileStream.on("finish", function() {
resolve();
});
});
});
downloadFile(url,path)
- In
package.json
create a script:
"scripts": {
...
"loadContent": "node helpers/loadContent.js",
...
- In console, run
npm run loadContent
to load the files - To add to the build script, change the build script to
"build": "npm run loadContent; nuxt build",
I don't add the content loader to the dev
because my loader takes a while
Hope that helps!
from content.
Are you using a webook or a server hook? Would you be able to share some code if you don't mind please?
from content.
Related Issues (20)
- Production Build: queryContent Triggers 500 Internal Server Error HOT 15
- <ContentList> works in "npm run dev", but not in "npm run build" HOT 6
- Docs: Missing icon makes text unreadable
- Intellisense for components are not available
- 10000 content files and dynamic slug page results in very long page load in SSG scenario (ssr:false, clientDB:true, nuxt generate) + huge cache file
- queryContent does not support i18n
- queryContent doesn't work after nuxt build HOT 13
- failed import from '#build/*'
- Content and i18n - Document not found for non-default locales HOT 6
- TOC of useContent do not works HOT 1
- Cannot access 'useNitroApp' before initialization HOT 2
- Simple content page completely freezes up Firefox/Chrome HOT 2
- Document not found under production environment with other files in `/content` directory
- How to modify the default text 'Table of Contents' on the right when using the ContentRenderer component?
- Stray files in content directory, cause build to fail HOT 1
- Stop build with unsupported filenames HOT 1
- ContentSlot gives props "accessed during render but not defined on instance" warnings, breaks content loading
- Accessing context/index of MDC HOT 3
- No Content In Static Sites HOT 1
- Respect datetime format used in markdown file frontmatter YAML HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from content.