I have a Nuxt Content project, which fetches a number of content files like so:
/content/resources/item.yaml
---
item:
title: Hello World
pdf: sample.pdf
Which is pulled into the Vue component:
async asyncData({ $content }) {
const resources = await $content('resources').fetch()
return { resources }
},
Where should the PDF file go in the Nuxt folder structure? and how should it be referred to in the YAML file? I'm trying something like:
/content/resources
-- item.yaml
-- sample.pdf
and then in Vue: <a :href="item.pdf" ..., which always just results in https://url/sample.pdf, which does not load obviously. What is the obvious thing I am missing, as I can't find it anywhere in the Nuxt Content docs?
/content/resources
-- item.yaml
/assets/files
-- sample.pdf
and referencing /assets/files/sample.pdf also doesn't work.
The Nuxt Content docs describe using static assets for this.
Move sample.pdf to static/ in the root of your Nuxt project (e.g., in static/sample.pdf), and then use its static-relative path in your pdf YAML property:
pdf: /sample.pdf
Related
I have a issue in tailwind css when i use bg-"[url('.assets/images.png')]" these is not working when i put online image address the image is coming what could be the issue with local images as i frustrated doing and doing but not geeting any
solution
A explaination would be helpful and correct syntax would be helpful
In your code there is typo, url is outside the []
Change
bg-url['(<imagepath)']
to
bg-[url('<imagepath>')]
Extra: Procedure:
When using asset image make sure you add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
tailwind.config.cs
module.exports = {
theme: {
extend: {
backgroundImage: {
'images': "url('.assets/images.png')", 👈 add your image here
}
}
}
}
Then use it as
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
Refer: https://tailwindcss.com/docs/background-image
I don't know the syntax of tailwind css, but it looks like your path '.assets/images.png' is not valid because of the '.assets' part. Try to find out where your image are located in relation to your resulting css file.
If they are organized like
assets/
images/
css/
styles.css
you can write
bg-"[url('../images/images.png')]"
If it's like
assets/
images/
public/
css/
styles.css
you can write
bg-"[url('../../assets/images.png')]"
But as I said I don't know tailwind.
After seeing your Screenshot and the organization of your files I think that
class= "bg-url[('Assets/images.png')]"
will lead to success, because your assets folder is located in the same folder as your index.html and it seems a good idea to write the path inside the quotation marks, not the brackets.
I have a multiplatform Nuxt 2.15 project with the following structure:
assets/platform1/... //contains fonts, images and config files
assets/platform2/...
components/platform1SpecificComponent.vue
components/platform2SpecificComponent.vue
components/sharedComponent.vue
layouts/platform1/...
layouts/platform2/...
components/platform1SpecificPage.vue
components/platform2SpecificPage.vue
components/sharedPage.vue
I've wrote the following plugin to dynamically register different platform's components unders the same name to be able to reuse most of my pages:
export default ({ store }) => {
const config = store.state.platform.config
Vue.component('NewsCard', () => import(`#/components/pages/news/${config.news.cardComponent.name}`))
}
The problem that after platform1 build, output dir contain assets from platform2 which increases size. At the same time sass or vue loader tries to parse style of vue template's part for components that are not used and not referenced in platform1, throwing errors about missing sass variables...
I know that nuxt allows to define ignore property in nuxt.config.json (or .nuxtignore) but that only works for pages and layouts...
I tried to configure webpack rules by modifiying nuxt.config.js extend property:
const fontsLoader = config.module.rules.find(i => String(i.test) === String('/\\.(woff2?|eot|ttf|otf)(\\?.*)?$/i'))
fontsLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
and actually that removed fonts from dist folder but it started to throw warnings: that these files doent have appropriate webpack loader. The same behaviour I observed when tried to exclude specific vue components from vue-loader.
So doesnt seem like a good solution after all..
Becides, the same approach didnt work for images inside assets folder:
const imgLoader = config.module.rules.find(i => String(i.test) === String('/\\.(png|jpe?g|gif|svg|webp|avif)$/i'))
imgLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
all the images are still added to dist...
Is there a way to tell nuxt (or webpack via nuxt config) to ignore specific folders with fonts and images under the /assets folder and specific vue components that are not pages or layouts?
The issue is how to get Vue to render the correct path for an asset, if the path to the asset and the assets name is passed through as a props.
Explanation:
When using a Vue component... if passing in props which contain a path and a file name of an asset to be loaded
export default{
name: 'NewComponent',
props: ["path","file"],
computed:{
calculateCompletePath (){
return this.path+""+this.file;
}
}
}
If using something like the above in a manner such as:
<template>
<div>
<video>
<source :src="calculateCompletePath" type="video/mp4"/>
</video>
</div>
</template>
How can you get the src portion to render correctly - e.g Vue generates its own string referencing the media folder for example
/media/movie.6ac43bcf.mp4
Side note:
I've read somewhere there is the possibility to using require (<<asset>>) but that doesn't seem to work if used on the computed function e.g. return require (this.path+""+this.file);
Any ideas how to get this to work?
Please refer this document for a detailed explanation on how to resolve static assets:
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
I think the problem is that your asset(in this case an mp4 file) is not located in your computer's /media folder.
See these 3 points for a better understanding: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
If your media folder is located under the root folder(/), then, the computed value /media/movie.6ac43bcf.mp4 will work.
If your media folder is under src folder of the app, your computed property should return #/media/movie.6ac43bcf.mp4
If your media folder is somewhere else, then you should create a proper path using #/ or the ./ symbol to reach the file correctly.
So, here I've got a locally stored file named "its_me.pdf" in the assets folder.
I'm trying to reference a download to the PDF using an HTML tag
<a href="../assets/its_me.pdf" download>PDF</a>
It is a real PDF file, if I go double click on the file manually I can see it display and it's real. However, when I go to my application on: http://localhost:4200/its_me (name of route in which it lives), and click on the link, I get a "Failed - No File" error.
Based on #AkashBhave answer I was able to get to work this way.
In my script tag:
data () {
return {
publicPath: process.env.BASE_URL
}
}
then in my template.
<a:href="`${publicPath}whatever.pdf`" download="download">PDF</a>
Alternatively with webpack, in your vue.config.js you add this;
chainWebpack: config => {
config.module
.rule("pdf")
.test(/\.pdf$/)
.use("file-loader")
.loader("file-loader");
}
then in the script tag;
data () {
return {
pdfLink: require("#/assets/whatever.pdf"),
}
}
Finally, in the template;
<a :href="pdfLink" download="download">PDF</a>
Relative imports should work by default with Vue. Try putting your PDF file into the /public folder of your application.
You can then reference the file using string interpolation, like so:
<link rel="icon" href="<%= BASE_URL %>its_me.pdf">
More information is available at
https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation
If that doesn't work, something might be wrong with your Webpack or build configuration.
I have a Vue.js + Electron app (electron-vue boilerplate)
What are the best practices of getting and displaying directory's folders and files?
Basically I want it to behave like a File Explorer (Windows) or Finder (Mac). You open a folder you get all the content displayed.
Let's say we have:
the main view called App.vue with a router inside of it.
there's an open folder button in App.vue.
And we also have FileExplorer.vue component that is getting displayed as a route inside that App.vue
How do I make this FileExplorer.vue component to get and display files and folders of, let's say, directory C:\test folder (on Windows) when we hit that open folder button in App.vue?
I know that I should use Node for that, but how exactly? What do I import and how do I use Vue to make it all work together?
All the projects on Github are too complicated for a newbie to understand how they work. For example this one is quite simple looking, but there's so much code in there that you don't even know where to start
Update:
I managed to get the content of a folder doing this:
<v-btn #click="readDirectory"></v-btn>
[...]
const fs = require('fs-extra')
export default {
name: "FileExplorer",
data () {
return {
dir:'C:/test',
files:[],
file:""
}
},
methods: {
readDirectory() {
fs.readdir(this.dir, (err, dir) => {
console.log(dir);
for(let filePath of dir)
console.log(filePath)
this.files = dir
})
},
}
}
And I displayed it like this:
<v-btn v-for="file in files" :key="file.id">
{{file}}
</v-btn>
But it doesn't really behave like a real file explorer...I get the folders and files on button click but I can't do anything with all those folders and files.
How do I make all the folders that it gets on click to behave in a similar way (to get its content) ?
And how do I display folders and files differently?
If you simply want to allow a user to select a folder in Electron I would suggest using the showOpenDialog API.
In the renderer process, you need to use the remote API to access the dialog API.
const { remote } = require('electron')
remote.dialog.showOpenDialog({
properties: ['openDirectory'],
defaultPath: current
}, names => {
console.log('selected directory:' + names[0]);
});
If you want to display the contents of a directory within your app you're going to have to use the node fs module and read the directory contents.
fs.readdir(path[, options], callback)
Will callback with all the file and directory paths which you'll then have to iterate over to get more info or to traverse recursively to get their contents. There are are node modules which make this process a little easier than writing it all yourself.
Once you've got an object tree containing all your files and directories you can use this to create a UI using vue.js.