I created a really simple vuepress project with the following folder tree:
| README.md
| .vuepress
-- config.js
| package.json
My README.md has some markdown headings with # symbols and some text.
I just want to get a sidebar in the left with links to the headings.
In order to do so, I setup the config.js as follows:
module.exports = {
title: 'title',
description: 'description',
themeConfig: {
sidebar: 'auto',
},
}
Also, in the readme page I have a metadata section at the beginning with the following:
---
home: true
---
Thee page is clearly getting the default theme styles and behavior, if I add other main theme stuff like features it works as expected.
However, there is no sidebar with links in the left.
What am I missing?
It seems that a page marked as homepage via metadata cannot render a sidebar. In order to get sidebar: auto to work, I needed to create another readme page inside a dedicated folder, like:
| README.md
| .vuepress/
-- config.js
| package.json
| docs/
-- README.md
Then, the /docs/ route displays a page with the sidebar properly formatted.
Related
I would like to organize all of my Docusaurus docs under a docs directory. However, I would also like to reference existing markdown documents such as README.md etc. How can I reference documents that are outside the docs directory from sidebar.js?
My solution has been to include them as React Component
e.g. if you want to include the Readme from the root, place a file like this in your docs dir:
---
title: Custom README title (for sidebar etc)
hide_title: true
---
import Readme, { toc as ReadmeTOC } from '#site/../READ';
<Readme />
export const toc = ReadmeTOC;
i am currently working in a Nuxt.js project and i'm trying the Pre Rendering option. I would like to change the format name of the files created when i launch nuxt generate... but i don't really now if this is even possible.
If my pages folder has these 2 componentes:
pages\
- page1.vue
- page2.vue
the default situation is that my dist folder will have these files after the generate command:
dist\
- page1
- index.html
- page2
- index.html
Would be possible to have this structure?:
dist\
- page1.html
- page2.html
I've tried to create my own router.js with my custom paths, using #nuxtjs/router module and it works in dev mode, but when i try to generate the static files, there are no errors... but it doesn't work. No page files in dist folder.
Perhaps i'm missing something, or perhaps it is not possible to do this, but... has anyone faced this situation?
Add generate.subFolders false in your nuxt config:
generate: {
subFolders: false
}
So this is a project in Laravel with Vue+Vuetify frontend. I'm using Vue CLI. I have set Vue CLI's output directory to Laravel's public folder using vue.config.js, like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: 'http://localhost:8080/api/v1/',
},
outputDir: '../public',
indexPath: '../resources/views/index.blade.php',
}
This works. However mdi icons on the web page do not show. I understand that I need to add link tag <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> to the index file, but I don't know where do I add it. The index.blade.php is overwritten by the Build process every time.
Alternate path is to include that css file in the build process by installing npm package and adding a few lines to my main.js, but I'd rather avoid that since my output is already getting bigger.
Figured out soon after posting question. I'll post it here for my own record and for anyone else landing here.
The solution was simpler than I anticipated. Vue CLI uses contents of /public folder to generate build output. So the solution was to simply go to public/index.html and place the meta tag in there.
Note: In my case I created a Laravel project and then used Vue CLI to create a Vue project inside Laravel project folder, so my folder structure looked like this:
Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public
Note that there are two public folders: First one is in Laravel project's root directory, whereas the second one is inside Vue project's directory. We are talking about the second one here.
I've recently taken on the task of merging 2 apps with a decent amount of overlapping functionality into one app. I'm using Vue as the front end library and consuming data from a .NET core back end. Webpack is providing all the other magic.
I decided to use Areas to separate the disparate functionality, so I have 2 entry points in webpack.config.js.
module.exports = {
context: __dirname,
entry: {
app1: "./app1/bootApp.js",
app2: "./app2/bootApp.js"
}
When I run the application, I get the contents of index.cshtml but nothing else. Vue isn't being loaded.
I've defined routes for the areas like so:
` app.UseMvc(routes =>
{
routes.MapRoute(
name: "app1",
template: "{app1:exists}/{controller=Home}/{action=Index}/{id?}"
);
routes.MapAreaRoute(
name: "default",
areaName: "app1",
template: "{controller=Home}/{action=Index}/{id?}"
);
and another one just like that route for app2.
Because I can see the contents of index.cshtml for app1 I am really puzzled as to why Vue isn't loading.
Barebones demo here.
After a day of digging around, I found a solution to the problem. The index.cshtml file was loading just fine, and there was an element with an id of app per convention, but I decided at first to try and forgo the framework default _Layout.cshtml file and _ViewStart.cshtml file. The layout file in other MVC apps we've integrated Vue into have an element in the head section that looks like this: <base href="/" />.
In the router, we define the root route path as "/", so it seems that by skipping the layout file that included the base element, Vue didn't have anything to attach the root route to and all subsequent relative links to. So the index page rendered just fine, but Vue never loaded.
I am currently evaluating using Docusaurus to generate a static web site. The site itself is not documentation focused, in fact, the site is not even computer or technology related. But as a techie myself, I want a CI and Git-powered publishing strategy for this web site.
Docusaurus uses Markdown for its page content (outside of custom React-based pages). However, when these Markdown pages are built, they are all placed in a top-level folder in the static site called docs. This folder naming doesn't really fit with the web site I want to produce.
There is a configuration setting for customDocsPath but this only changes where the build looks for Markdown files, not the output path in the created site content.
I'm not a React developer, but aside from hacking away at the JavaScript in the build engine to search/replace instances of docs, is there a better way to do this?
In docusaurus 2 changing main docs folder is quite straightforward:
rename docs/ to whatever/
add following to docusaurus.config.js
presets: [
[
'#docusaurus/preset-classic', // should be already there
{
docs: {
path: 'whatever',
routeBasePath: 'whatever',
// ...
We don't currently support routes other than /docs - yet. There is a pull request that started back in August, but has been recently resurrected again. The PR is being reviewed and updated to allow more customizable routes.
As of Docusaurus 1.6, this is now implemented. The pull request has been merged.
More details about this are found in the site configuration.
Simply add the following to the siteConfig section in siteConfig.js:
const siteConfig = {
title: 'My Awesome Site',
docsUrl: '',
// ...
};