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.
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 am struggling with something I thought will be simple.
Ideally I want to save my base64 file with prompt same as you get when downloading from browser, however that seems impossible with capacitor app.
So I used FileSystem, to save file on Documents directory, which went fine, I also can get uri file. But because there is no indicator that file was saved, I would like to at least try to open the file with native apps. I've noticed there is cordova plugin cordova-plugin-file-opener2 but I can't seem to make it work with capacitor 3 and VueJs, without cordova.
Maybe I am overthinking it ? is there any way download file or open file with Capacitor?
For web view (not native app) I am using hidden download button, but that does not work at all in capacitor app
here is my current code
Filesystem.writeFile({
data: pdf,
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(() => {
Filesystem.getUri({
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(res => {
// open file here with my res.uri ?
);
});
I had the exakt same problem. I solved/workarounded it by using the official capacitor "Share" plugin, so the user can choose what she wants to do with the file. https://capacitorjs.com/docs/apis/share
I did not find any other solution to show or download those privately stored files. FileOpener seems to have a lot of problems on Android and does not work either on iOS.
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
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.
Our environment has setup a private git repository and configured jspm to install packages from this repository. The repo has a .js, .html, and .css file. Jspm brings all the files down into a folder with #master appended to the name to reflect the branch and stores it all in the pre-configured jspm_packages location on my machine. It also adds a second #master.js file next to the folder with export statements inside (I didn't create this file myself).
These files represent custom elements I want to use in my aurelia application. There is a .js for the viewmodel and a .html for the view (and a .css file). When I go to use the custom element I get a 404, file not found, because system.js is looking for a #master.html file, which doesn't exist.
Jspm seems to be referencing the #master.js file in config.js and somehow that's assuming a #master.html file in Aurelia? Only a #master.js file was created when I installed the package using jspm. The original .html file does exist and lives inside the folder I mention above, but that #master.html file does not and I'm not sure 1) what that file would be for and 2) why it's being referenced. There no reference to #master.html in my code.
I'm not really even sure if this is a JSPM issue, Aurelia issue, System.js issue, or some combination of them?
Anyone else have a similar experience with these technologies?
Thanks,
Chris
Essentially, Aurelia believes you are importing your repo as a custom element, so when you are importing the #master.js it is looking for the matching "view" of what it assumes is a viewmodel.
It sounds like you need to structure your repository as a plugin. Add an index.js file at the top level and make that responsible for running the configure function, which should make the components you want global resources. Ensure your package.json points to your index.js as the 'main'. After that, you would need to add a .plugin('your-package-name') in the main.js file, just like any other plugin.
An example index.js is like so:
import {Options, GLOBAL_OPTIONS, DIRECTION} from './options';
import {Dragula} from './dragula';
import {moveBefore} from './move-before';
export {Dragula, Options, DIRECTION, moveBefore};
export function configure(config, callback) {
let defaults = new Options();
config.container.registerInstance(GLOBAL_OPTIONS, defaults);
if (callback !== undefined && typeof callback === 'function') {
callback(defaults);
}
config.globalResources(['./dragula-and-drop']);
}
(taken from here)