I'm actually running a Laravel website in which I would like to run a Vuepress documentation section.
Installing Vuepress is quite straightforward thanks to the instructions and so is the development server.
However, when it comes to integrating it as a static site, I'm kind of lost with the interactions with the Laravel.
All my documentation is located in a docs folder located on the root of the my Laravel App.
I managed to set up Vuepress' config.js to build the static site into another folder.
base: '/docs/',
dest:'./public/docs',
Doing the above, exposes the documentation is entirely exposed to the web (in the public folder).
However, what I'm looking for is to integrate it more precisely in Laravel (with the middleware and routes I created).
Method 1
1. Install vuepress in /docs in your laravel directory
2. Configure vuepress with the correct base and dest
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: 'docs/',
};
3. Enable laravel views to include files from the /public directory
/app/config/view.php
...
'paths' => [
resource_path('views'),
base_path('public'), // now blade's #include will also look in /public
],
...
4. Create a laravel route for vuepress that allows .html extension
/routes/web.php
use View;
Route::get('/docs', function() {
View::addExtension('html', 'php'); // allows .html
return view('docs.index'); // loads /public/docs/index.html
});
Method 2
Or for more control for assets through Laravel, you can try this tutorial here: https://serversideup.net/vuepress-within-a-laravel-application/
# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress
# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md
package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: '/docs/',
};
npm run docs:build
/routes/web.php
Route::get('/docs', function() {
return File::get(public_path() . '/docs/index.html');
});
Related
Let me start of with the fact that im new to laravel and english is not my main language so dont mind my grammer. I have a project that has a laravel api with a vue front-end. The Laravel web routing redirects everything to a single blade file that contains the vue app. this way i can use the vue routing. This is has all been working fine for a while now but now im trying to build for production and ive run into the following issue.
after using npm run build to build for production laravel puts /build/ to every route im using through vue. This is very logical given that it uses the build folder in the public directory like it should. But its ofcourse verry ugly for the users. Is there a way to remove the /build/ from the url? (appart from redirecting /build/ to / in the .htacces file on the server)
You can set the environment variables in .env file for javascript using VITE_ prefix as below:
Please add the new environment variable in .env file as below:
VITE_BASE_URL="/"
Made the router related changes in your Vue file as below:
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_BASE_URL || '/'),
routes: [
.....
],
})
Problem from import.meta.env.BASE_URL in vitejs, in build mode this import.meta.env.BASE_URL result "/build/" and development mode result, is "/"
I don't know where to change this, but I fix this problem with
const router = createRouter({
history: createWebHistory("/"),
routes: [
{
......
}
]
})
and fix it
I have tried to change the HomeHeader of the Admin page, but it has no changes.
I copy admin folder in node_modules/#strapi/admin/admin to my-project/admin and then I modified HomeHeader.js file as the image below:
I started strapi with the command yarn strapi develop --watch-admin, and nothing happened
Please help me to custom this! Thanks
Strapi Version: 4.0.4
Operating System: MacOs
Database: postgres Node
Version: v14.18.1
NPM Version: 6.14.15
Yarn Version: 1.22.10
In Strapi-v3 you can customize the admin panel UI, but in v4 you can't.
there is an opened issue in GitHub about this problem.
I also encountered this requirement of a client.
To replace or customize Strapi admin dashboard home, you can overwrite the file using webpack.
First make sure to install webpack-dev-server in devDependencies.
Create a component file in src/admin/components/Home.tsx with basic React component code.
on the file src/admin/webpack.config.js write this code to replace the original Home page.
module.exports = (config, webpack) => {
...
/**
* Overwrite the dashboard home Component
*/
config.plugins.push(
new webpack.NormalModuleReplacementPlugin(
/.cache\/admin\/src\/pages\/HomePage\/index\.js/,
path.resolve(__dirname, "components/Home.tsx")
)
);
....
// Important: return the modified config
return config;
};
then re-build you app.
I have this error
Module not found: Error: Can't resolve '#babel/runtime/regenerator' in 'C:\wamp64\www\project-dev\modules\Gallery\Resources\Assets\Backend\Views\Album'
when I execute this command npm run dev.
So to explain my laravel project directory:
app
modules
auth
backend
gallery
themes
admin
node_modules
resources
js
components
router
index.js
store
app.js
sass
views
package.json
webpack.mix.js
So in my router/index.js of vuejs app, I will includes routes from a module.
I make this:
import GalleryRoutes from "../../../../../modules/Gallery/Resources/Assets/Backend/routes";
// Vue Router
const router = new VueRouter({
base: '/admin',
mode: 'history',
routes: [
...constantRoutes,
...GalleryRoutes,
],
linkActiveClass: "active",
linkExactActiveClass: "active",
});
routes.js file from Gallery module:
// Views
import AlbumIndex from './Views/Album/Index.vue'
// Routes
export default [
// AlbumIndex
{
path: 'gallery/albums',
component: AlbumIndex,
name: 'backend.gallery.album.index',
meta: {
heading: 'Gallery',
title: 'Albums',
icon: 'fas fa-images',
showed: true
}
}
];
But I get the error above.
I think this is a bug related to the node_modules folder, I'm not sure.
It's possible to achieve what I want to do? (include .Vue or .js files from outside my root app directory).
PS: I try to make this to try to answer this question: Backend (VueJS) of laravel application with modules approach
Thank you to helping me :)
It's looking for a dependency that is not installed. In your case you can do npm i babel-runtime --save to install that dependency you're missing.
Installing whatwg-fetch fixed the issue for me
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.
npm run dev
Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.
src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:
$icon-font-path = "../fonts" - but npm gives error.
By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"
Copied fonts folder inside puclic/css folder, didn't work.
Added options to the webpack.mix.js file:
options({processCssUrls: false})
and in _variables.css again set:
$icon-font-path = "../fonts"
Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.
Also, I followed this question, but couldn't find any answer, all solutions didn't work.
glyphicons not showing with sass bootstrap integration
Finally, found the solution. In webpack.config.js set:
publicPath: '../'
instead of Mix.resourceRoot
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: Mix.resourceRoot
}
},