Rendering information from my controller only passes information through to the partials included on the template.
Here is how I go about it in my login controller. After I check password and username provided I send two objects to the dashboard template that I would like to render to the page
res.render(path.join(DIST_DIR, 'dashboard.hbs'), {
user,
company
});
I can log this info and can see that it exists and it also renders out in the partials that included on dashboard.hsb, but it seems that dashboard itself is not getting the data.
My webpack setup
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.hbs$/,
loader: 'handlebars-loader',
query: {
partialDirs: [
path.join(__dirname, './src/views/partials')
],
helperDirs: [
path.join(__dirname, './src/helpers')
]
}
},
new HtmlWebPackPlugin({
filename: 'dashboard.hbs',
title: 'Dashboard',
chunks: ['dashboard', 'dashboard~login', 'vendors~dashboard', 'vendors~dashboard~login'],
template: 'src/views/index/dashboard.hbs',
excludeChunks: ['server']
}),
So the page renders fine and the user information that I try to pass does show up in the partials (used by dashboard layout), but the information for the user that I want to display in the body of dashboard.hbs is always blank. I seems that information is not passed to this template.
Where am I going wrong? I would really appreciate some help here.
I was using the wrong loader. Instead of using handlebars-loader, I updated the code to use the html-loader
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.hbs$/,
loader: 'html-loader',
query: {
partialDirs: [
path.join(__dirname, './src/views/partials')
],
helperDirs: [
path.join(__dirname, './src/helpers')
]
}
},
And now everything works as expected. Hope this helps someone else down the line
Related
i have Nuxt project, when i try to add or edit message property it's not reflect direct, i should terminate the app and re-run it to see the results.
i followed the Nuxt Documentation and applied every single step
Edit your nuxt.config.js modules to look like this
modules: [
[
"#nuxtjs/i18n",
{
locales: [{ code: "en", name: "en-US", file: "en.json" }],
langDir: "locales/"
}
],
]
assuming your strings file is called en.json and it's inside locales/ like locales/en.json
I am trying to change the default url of a page in nuxt project. My newly created page is one.vue and it's inside the pages folder. I added the following code inside nuxt.config.js file.
router: {
routes: [
{
path: "/notone",
component: "pages/one",
},
],
}
I need to redirect to the one.vue page by entering the url in the browser as /notone. But it will give 404 error. It's working only for /one. Where I was wrong?
You can use router-extras to add more flexibility to Nuxt's router. Check my answer here: https://stackoverflow.com/a/68166208/8816585
Basically, going to one.vue and setting
<router>
{
alias: [
'/notone',
]
}
</router>
should be enough.
I have recently switched to laravel-mix from Vue-CLI.
All my images in html stopped working. They were used like this:
<img src="#assets/images/logo.png" alt="Logo">
(#assets is a alias for the resources/assets folder)
With this method, when I look at the html in the browser, I see that it got compiled to [object Module]. So I was able to fix it this way:
<img :src="require('#assets/img/sidebar/logo.png').default" alt="Logo">
But I can't imagine this being the best solution, it seems very hacky and I dont want to add this require().default thing everytime I use an image.
I've tried adding this to the mix.webpackConfig:
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
]
}
But that doens't do anything, but I don't even know if it works at all to be honest.
Is there a better way to use images with laravel-mix or is require().default really the way to go?
Laravel-mix offers the ability to configure aliases
const path = require('path');
mix.alias({
'#assets': path.join(__dirname, 'resources/assets')
});
module.exports = {
publicPath: './src/pages/home/Homepage.vue',
pages: {
'Home': {
entry: 'src/pages/home/main.js',
template: 'public/index.html',
title: 'Home page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Home' ]
},
'Map': {
entry: 'src/pages/map/main.js',
template: 'public/index.html',
title: 'Map page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Map' ]
}
}
}
My app can't seem to get my home page. Am I using the public path correctly? For reference, this is a multipage app. I'm not sure what I should set my base url to since this is the first time I've made anything with Vue. I'm using Vue/Cli. It runs, but says it cannot get my linked page. How do I fix this?
publicPath is for deployment only - it is not path to your (DEV) file system but path following the domain name when the app is deployed.
Documentation
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'
I have a vuepress site which lives in my current vuejs app at /docs.
I am building the site into the main /dist folder and deploying them together.
When I am adding a link to the navbar in the .vuepress/config.js file the base is always appended or if adding the full URL it creates an external link.
module.exports = {
base: "/docs/",
dest: "dist/docs",
themeConfig: {
nav: [
{ text: 'Home', link: 'https://myapp.com/'},
{ text: 'Guide', link: '/guide/'}
],
}
}
I can change the way external links are handled, but this is site wide and I do not want this to apply to all links.
In short:
{ text: 'Home', link: '/'} // this is directing to /docs due to base
I would like, for this to direct to myapp.com