I have a frontend in NuxtJs. I want to list out all the PDFS stored under the static folder and make a dynamic link to open those documents in the browser as a separate window.
So I want to get the list of all the files of specific folder.
Nuxt.config.js uses fs module as default loader.
we can add this snippet of code to the Nuxt.config.js file and store the response to the env variable so that it can be used anywhere.
const fs = require('fs')
// To read Static Files
const files = fs.readdirSync('./static/pdfs')
process.env.STATIC_REFERRAL_DOCS = files
Related
I have a Vue SPA app. Now I want to extend this app with app modules so I thought to make a folder src/modules that contain the modules folders. I want to put at the root of each folder some configuration js files (store.js, route.js, and so on).
The question is: in the main files (src/store/index.js, src/router/index.js, etc.), how can I loop for every folder in src/modules and check if some configuration file exists to add its content at the main config? Of course this operation should be executed at build time, modules install is not intended to be dynamically.
Thanks a lot
You can use require.context
const configurations = require.context('./modules', true, /config\.js$/i);
configurations.keys().forEach(filename =>
{
console.log(filename);
// file contents will be inside configurations[filename]
});
I want to load a .jscad file into a vue component.
I have set up an vue-cli project, installed this openjscad-vue viewer using npm and am using the openjscad component. This component has the prop design which should allow specifying a path to a .jscad file for the openjscad viewer. This is not working properly.
Tried to find the error and do a workaround:
Inside this component (OpenJscad.Vue) is a fetch() request to load the .jscad file, but it doesnt work. To be sure that the openjscad processors is working correctly I used a plain string containing the .jscad code as source and this works!
But I want a whole .jscad file loaded.
I think the fetch request is the problem. I only need a static .jscad file to be loaded from the same server the vue-cli project is serving.
I've tried this:
using axios:
async mounted() {
[...]
await axios.get("/logo.jscad").then(response => (this.source = response));
installed raw-loader/file-loader and configure it inside vue.config.js. Imported the file from the assets folder. -> Webpack loader error. It seems to me that vue.config.js is ignored?
import logo from "logo.jscad"
this.source = logo
Any recommendation to solve this problem?
Thank you.
To answer part of my own question and maybe help other people:
the vue.config.js file do not have to be at same directory as package.json. It is only loaded and used after put inside the /src directory next to main.js or App.vue
I'm trying to provide a link to a gpg file on a webpage. Irrespective of relative path or absolute (static asset), on clicking the link, the index page keeps re-appearing. I don't want to use js to read the contents of gpg and render that. Instead, I want the browser to handle opening of the file (either open or download). Not working with other file types as well.
I have tried adding webpack config for this particular file type (file-loader/url-loader). Using raw-loader I can read the contents of the file, but I don't need that. Tried adding the file as an import.
To reproduce, create new project with vue-cli. Add this to App.vue template: Link
Create vue.config.js:
chainWebpack: config => {
config.module
.test(/\.gpg$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
Kindly suggest a way to include links to file present on the same domain. I don't want the vue app to handle rendering of such files.
I'm trying to set my API URL in a .env file, my .env file is in the root folder of my project. I'm using VUE_APP_ prefix.
According to the doc .env file is loaded in any case. So should'nt I be able to get it everytime?
I m using MacOS, no Vuex.
My .env file
VUE_APP_API_URL: '"http://localhost:3000/"'
My .vue file
data() {
return {
test: process.env.VUE_APP_API_URL
}
},
I expected to get http://localhost:3000/ but I get undefined
Your syntax is wrong in your .env file. It's VUE_APP_API_URL = with = not :.
And you don't need double and simple quotes.
It should work this way:
VUE_APP_API_URL = 'http://localhost:3000/'
You'll need to reference the .env file in Webpack so that the variables get compiled into the build. The reason why you can't reference the variables is that they're not parsed into your build/public folder.
I'd use something like
https://github.com/mrsteele/dotenv-webpack
When you need to load into a WKWebView a local HTML file that references a local javascript you can use this syntax.
webView.loadFileURL(htmlURL, allowingReadAccessToURL: jsURL)
However when the html file references multiple js files included into a local folder, which is the correct syntax?
I tried passing the NSURL to the local folder but it is not working.
Thanks.
in that case u need to make a folder contains all the files access from html file, then add it to project, while adding to project select create folder reference and then get the path for the html file and load it
var path = NSBundle.mainBundle().pathForResource("myindex", ofType: "html", inDirectory: "myfoldername")
var pathUrl = NSURL(string: path!)
then load pathUrl to web view