Hello I just want to put a link to PDF file but it's impossible. There is a library in npm or by another way to do that in VUEJS
I checked this link but it doesn't work
VueJS 2: Local assets
// template
<img src="~assets/images/wtd.jpg">
// image folder
// error
SOLUTION
For images just use
<img src="#/assets/images/image.jpg">
For pdf just put your file in static folder and use this link. In my case I use
<a href="../../static/mypdf.pdf">
If you're using the project created by vue-cli, then below syntax will work
e.g
<img src="#/assets/images/{{imageName}}.png"/>
Hope this helps
With webpack, you can bundle assets with CopyWebpackPlugin.
Have a look at this webpack.config.js, it uses assets. https://github.com/BlueForestTrees/web/blob/master/webpack.config.js
Inside plugins section:
new CopyWebpackPlugin([{from: './img', to: 'img'}]),
If you used vue-cli to create the project. The default image type of 'png|jpe?g|gif|webp' is default supported
In template you can use
<img src="~assets/images/demo.png"/>
In script you can use
const demo = require("#/assets/images/demo.png") // # is a alias in webpack config
or:
import demo from "#/assets/images/demo.png")
For the .pdf file, there is no default loader for this type file. You need config a loader like url-loader for this: https://cli.vuejs.org/config/#configurewebpack
Related
I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.
I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).
For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?
The current documentation is not very precise about this. There are actually two cases:
Importing CSS from existing packages
You can pretty easily import CSS files from other Node-modules using the require() function:
import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render
fun main() {
require("bootstrap/dist/css/bootstrap.css")
render(document.getElementById("root")) {
h1 { +"Hello"}
}
}
For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.
Incorporating your own CSS into the Webpack build
This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:
Create webpack.conf.d directory in project's root and put inside some JS file containing:
config.resolve.modules.push("<your_stylesheet_dir>");
This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.
Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:
task("copyStylesheets", Copy::class) {
from(kotlin.sourceSets["main"].resources) {
include("styles/**")
}
into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
// kotlin { js { moduleName = "xyz" }} has to be set for this to work
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
dependsOn("copyStylesheets")
}
Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.
My build:
kotlin("js") version "1.7.20"
index.html
<link rel="stylesheet" href="index.css">
index.css is in the same resource folder as index.html.
This also works for images anything else, apparently.
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.
I have a basic project in VS code, and quite a simple task. I want to include an old javascript file in my project the correct way, so it gets loaded in the browser.
The file should be located in src\assets\scripts\oldLegacyScript.js
I tried this hack: How to add external JS scripts to VueJS Components which injects a <source> tag in the document on runtime. This only works if I put the .js file in the generated public folder in where the compiled files will be. If the file is not in the public folder the browser tries to download the index.html file, which I cannot understand:
If i follow this solution: Importing javascript file for use within vue component I get syntax errors on the import statement:
So how the heck do I overcome this simple task of importing a simple javascript file in my Vue project?
Import like this
<script>
import * as myKey from '.src/..';
export default {
}
</script>
I'm using vue cli 3, Vuetify. My back-end programmer asked me that put my css, js, and img file in static folder for him. How can I do? I cannot find webpack.config.js file at vue cli 3. some guys said use vue.config.js file, but I still don't know how to solve this problem.
thank you.
this link is build result. I want to put css, img, js files in one static folder.
Take a look at Public Folder for Vue CLI 3. To quote the docs
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
All you would need to do is place your css, js, images in your public folder