Comments (4)
Sorry for late reply, and thanks for the patch. It really worked! I also have created PR for example mentioned in #83.
from frontmatter-markdown-loader.
Right. #83 may answers your question.
from frontmatter-markdown-loader.
Sure, that answers my question, but the content of markdown won't render from the server. Please check out this https://github.com/jefrydco/jefrydco/tree/feat/frontmatter-markdown-loader
from frontmatter-markdown-loader.
Looks abusing asynchronous import
which couldn't be resolved on the server-side 👀
<component :is="">
expects function which returns Promise by import
for SSR + asynchronous importing. Or just a ready-made component object synchronously. Your approach is passing an object which will be fulfilled by another asynchronous process, but <component>
can't wait on the server-side.
Here's the quick patch to fix the problem with synchronous way:
diff --git a/pages/blog/_slug/index.vue b/pages/blog/_slug/index.vue
index 25f5bd4..7393e4a 100644
--- a/pages/blog/_slug/index.vue
+++ b/pages/blog/_slug/index.vue
@@ -295,7 +295,7 @@ export default {
blog: null
}
},
- async created() {
+ created() {
const slug = this.$route && this.$route.params && this.$route.params.slug
const locale = this.$i18n.locale
const locales = this.$i18n.locales
@@ -306,34 +306,33 @@ export default {
try {
if (locale === defaultLocale) {
editPath = `contents/blogs/${slug}/index.md`
- blog = await import(`~/contents/blogs/${slug}/index.md`)
+ blog = require(`~/contents/blogs/${slug}/index.md`)
} else {
editPath = `contents/blogs/${slug}/index.${locale}.md`
- blog = await import(`~/contents/blogs/${slug}/index.${locale}.md`)
+ blog = require(`~/contents/blogs/${slug}/index.${locale}.md`)
}
- await (() => {
- if (blog !== null && typeof blog !== 'undefined') {
- const fullPath = `https://jefrydco.id/blog/${blog.attributes.slug}`
- this.availableLocales = availableLocales
- this.blog = {
- img: blog.attributes.img,
- imgCreator: blog.attributes.imgCreator,
- title: blog.attributes.title,
- description: blog.attributes.description,
- postedDate: blog.attributes.postedDate,
- updatedDate: blog.attributes.updatedDate,
- slug: blog.attributes.slug,
- readingTime: readingTime(blog.html),
- component: blog.vue.component,
- fullPath,
- discussLink: `https://twitter.com/search?q=${encodeURIComponent(
- fullPath
- )}`,
- editLink: `https://github.com/jefrydco/jefrydco/edit/master/${editPath}`
- }
+ if (blog !== null && typeof blog !== 'undefined') {
+ const fullPath = `https://jefrydco.id/blog/${blog.attributes.slug}`
+ this.availableLocales = availableLocales
+ this.blog = {
+ img: blog.attributes.img,
+ imgCreator: blog.attributes.imgCreator,
+ title: blog.attributes.title,
+ description: blog.attributes.description,
+ postedDate: blog.attributes.postedDate,
+ updatedDate: blog.attributes.updatedDate,
+ slug: blog.attributes.slug,
+ readingTime: readingTime(blog.html),
+ component: blog.vue.component,
+ fullPath,
+ discussLink: `https://twitter.com/search?q=${encodeURIComponent(
+ fullPath
+ )}`,
+ editLink: `https://github.com/jefrydco/jefrydco/edit/master/${editPath}`
}
- })()
+ }
} catch (error) {
this.$router.replace('/blog')
}
from frontmatter-markdown-loader.
Related Issues (20)
- Pure date gets parsed into UTC timestamp HOT 1
- How can we access the markdown attributes right from nuxt.config.js? HOT 1
- Using markdown-it plugin breaks the subcomponents inside the markdown file in nuxt HOT 6
- Vue component appears to be parsing mustache tags within code snippets HOT 5
- component HOT 1
- How can we enable code highlighting for markdown ? HOT 1
- How to install highlight.js with frontmatter-markdown-loader ? HOT 1
- Missing line breaks in code snippet HOT 5
- Cannot stringify POJOs with symbolic keys Symbol(Symbol.toStringTag) HOT 1
- How to use within a nuxt payload dynamic route HOT 1
- Using the dynamic example B, I am unable to render local components in markdown HOT 2
- Any way of using dynamic data from database for vue components?
- Is there a way to get last modified date and time of md file HOT 2
- Action Required: Fix Renovate Configuration
- vue: Unknown custom element from .md HOT 3
- Using style-tag breaks .md file HOT 5
- Vue component mode doesn't work on Vue 3 project due to this plugin is stuck on Vue 2 compiler; `vue-template-compiler` HOT 9
- Jest Transformer for the Loader
- Dependency Dashboard
- how to set attributes
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 frontmatter-markdown-loader.