I am not able to find information on how to modify the main page of Vuepress, which, although I like its structure, being in .yaml format does not allow me to put links.
Is it possible to put links?
Or better, is it possible to convert that page to markdown format but keeping the output it delivers?
Unfortunately it is not possible without modifying the Vue templates. The home page is rendered by the Home component component and it renders the page's frontmatter using Vue's "Mustache" syntax. Values inside the mustaches will only ever be rendered as plain text.
You'll have to modify the Home component by either "ejecting" the default theme or by creating a custom layout for the home page. In both cases, you will obviously not receive any updates to the components anymore when you upgrade Vuepress.
I've created a demo to show how to use a custom layout to allow the frontmatter to be HTML. I've copied the Layout and Home components from Vuepress and changed the new Home component to use v-html to inject HTML values into the h1 component. So now your heroText could be Hi! This is a <a href='https://www.google.com'>link</a> and it will be displayed as a link on the home page. You could obviously do the same for the other elements.
Be sure to set the layout value of your home page to the new layout, e.g. layout: HomeLayout.
Related
For example:
I have an url like /content/supercontenturl/.
If this content type is a video (param in my DB), I'll show videoplayer on the page and other components, but if type of content is text or other, I'd like to load specific page.vue for this content with own components, but the url must be same - /content/supercontenturl/
My structure pages:
index.vue
/content/
/_supercontenturl/
_id.vue // The page for video
_id_text.vue // The page for text
... // Other pages
index.vue
you should remember in nuxt all vue files inside Pages directory are components check the guide, and each file or directory you add there will create routes.
the easy way to succeed your demand is put the video page and content page with a proper name in components directory. Create a new file in pages it will contains in scripts the data call and template will contains the component selector, you can use a v-if or dinamic components for load the right component. and pass the data by props.
I have a vue project using mathjax to render partial html files which include some mathml inside. Those files are dynamically retrieved from remote server when customers search something and shown with vue v-html as raw html.
In details, all these occurs in the component 'Home', in the mounted function, I add mathjax related script as below:
const mathjaxScript = document.createElement('script');
mathjaxScript.setAttribute('id', 'MathJax-script');
mathjaxScript.setAttribute('async', 'async');
mathjaxScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js');
document.head.appendChild(mathjaxScript);
Then when customers search some keyword, corresponding partial html file will be retrieved and replace v-html tag, the math equation should be shown expectedly. However, those embeded mml:math tags weren't handled, they are just plain text, the math equation not handled correctly.
However, when I put one partial html in the vue template (not dynamically retrieve from remote server), the math equation rendered correctly. the mml:math tag will be replaced with mjx-container, etc.
So my question is: how to apply mathjax to those dynamically retrieved mathml? that is, rendering mathml on the fly with mathjax, Thanks.
Note: I use vuejs, mathjax 3 and typescript.
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
I'm building a single-file-based Vue application from a template generated with the Vue UI tool.
I understand how a .vue file defines the styling/structure/behavior of a component, how smaller components can be composed into bigger components, and how the top-level "App" component mounts everything to an HTML Div.
As the user progresses through the app, though -- say from a login screen to a master screen to a detail screen -- what's the accepted approach to switching out the current screen-level component?
Ty in advance.
--The Vuebie
This is quite an open ended question so ill just show you what I have done in my own projects. I split my components directory into two directories; 'pages' and 'common'. (Ignore the 'firebase' directory is it beyond the scope of this question).
The common directory holds components that may be used in a page or re used in several different pages.
For example the 'account form' is used in my 'Edit Account page' and the category bar is used in several of my pages.
The pages directory holds components that are technically no different from my common components but they represent full pages on my website. A page component may contain several common components.
Now the biggest distinction between common and pages is in the router. I route different paths relative to the main url (that is probably not the technically correct description but hopefully you get the point) to each of the pages. Here is my index.js file from my router directory:
As you can see, I have a route pointing to each one of my pages. You can " switch out the current screen-level component" (as you put it) by using router-link tag's to navigate between different page components. These are clickable urls that your client can use, they can also be wrapped in buttons and such.
For example, this router link navigates to my home page, the component name is 'Helloworld'. See its corresponding reference in my router's index.js and in the pages directory so you can connect it all in your head.
<router-link class="nav-item nav-word" :to="{ name: 'HelloWorld' }">
Finally, I will talk a bit about the App.vue file. The App.vue acts like a base component as it contains the 'router view' tag within it's template:
<router-view/>
This means that every page that you route will be placed in the position of the 'router view tag'. I.e this tag will be replaced with the page. It is common practise to surround this tag with html code that you would like to be shown in each page. For example I have my router view tag between my nav bar and footer. So that the nav bar and footer will show on each page.
I want to create a SPA with the white labeling capability and I am wondering if there is a way for me to dynamically change the styles tag inside a single page VueJS component?
I think I can manage the template dynamically by using something like
<div v-if="condition"></div>
But is there similar scheme available for styles ?
Can it be done without using Server Side Rendering?