Duplicate image is created using Vue and laravel - vue.js

Hello guys I'm new to Vue so I want to know why duplicate image is created for eg:- when I m using inline css after compiling it create one more image in public folder. Note I have image/logo.png in resource/assets/js folder
example code
<template>
<Img src="image/logo.png">
</template>
This example code is located in resource/assets/js . thing is that during compiling image file should be present in resource/assets/js/image/logo.png otherwise it throw error module not present.is there any another alternative for this, eg:- image file present in one common folder so it does not create duplicate image and npm run watch does not throw error.

I think this is due to default webpack config of laravel.
By default, Laravel Mix and Webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet.
Detail here

Related

Proactively control div that will be created from the server side

I will expect <div class ="fromLibrary> to be created from a library's js file.
So I want to add a behavior on my client so that it watches the div with "fromLibrary" being created and add a styling to it dynamically?
I can go on node_module and change the specific .js file but library will get constantly updated and will overwrite what I modified.
Does that technique exist or am I being funny.
Thank you for help in advance.

Vue Quasar - change name of builted generated css

Quasar creates two CSS files upon the build:
I want them to have the names like:
-quasar.css
-appQuasar.css
I have been searching a lot and I can't find any documentation to change the CSS. For example the app file on quasar.config.js
Thank you,

Add another main page to vue 2.6.6 project or inject a view without applying the styles imported in index.html

I've a problem with a Vue-js application (Vue 2.6.6).
I need to create a new page in this application that must not be affected by vuetify and other styles placed in the head of index.html file. I wanna now if it is possible to inject a view (navigating to it with routing) without applying styles or if it is possible to create another entry point for the app, making it as a multi-page application.
I've found a documentation for doing it, but the structure of files and folders they talk about is different from mine (I did not create the project) and I don't understand what I gotta do to set multiple pages.
https://cli.vuejs.org/config/#pages
I have a "main-priv.js" file inside src, not a "main.js", don't know if it is same.
I'm really bad with configurations and stuff like that, I've probabily taken the wrong life choice with this work, but nevermind, can you help me?

Vue Change image based on localization

I'm making a website using Vue, and have added localization using vue-i18n, however there are some svg-images that also need to change with localization.
Is it possible to add the filename to the localization file like this:
"image" : "EnglishImage.svg"
or
"image" : "../assets/images/price/EnglishImage.svg"
And in the Vue something like: <img :src="$t('image')">
And have it change when the localization is changed?
As a quick temporary fix I used the following steps:
Place the images normally into the page
Run project
Use inspect to find the path for them. (it was something like "../img/EnglishImage.c9bc8f65.svg"
Add these paths to the Localization files
Not the best solution, but for now it works

What's the best way to add JQuery to Enduro.js

I'd like to be able to use Jquery in my Enduro.js project, but there is not a single sample using it on github Enduro.js page
Libraries seem to be loaded in Enduro.js using RequireJS, wth the line found at the bottom of the default index.hbs :
{{!-- <script data-main="/assets/js/main.js" src="/assets/vendor/requirejs/require.js"></script> --}}
and the following code found un "assets/js/main.js" by default in all Enduro.js samples :
require.config({
baseUrl: '/assets/',
paths: {
// 'jquery': 'vendor/jquery/dist/jquery.min',
},
})
require(['jquery'], function ($) {
$(document).ready(function () {
console.log('requirejs ready to use')
})
})
The Jquery "path" line is commented out, and there is no /vendor directory in /assets by default.
Is there an automated way to install jquery in Enduro.js or is it just simply about creating by hand a /vendor folder, and copying /Jquery inside it ?
Well, there are many ways to use JQuery in Enduro. I'm not sure if it is the best way to import it (it could exist better ones).
In my current project, I'm using the CDN for reasons of efficiency. If you have no problem using CDNs I'd recommend it.
just copy this code:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
And then, paste it just before closing the body tag.
Another way is to create a folder inside /assets/js called 'vendor' and there, you cat put the jquery-3.3.x.min.js (Or whatever version you would like to use). Of course, you have to download it first from the official site.
After doing that, you just have to import it via HTML (before closing body tag):
<script src="assets/js/vendor/jqueryfile.js"></script>
NOTE: Creating the folder called 'vendor' is optional, you just could paste the file inside /assets/js. And make sure you type the right path to import it.
NOTE 2: remember that you should never touch the files inside _generated, so if you paste the file inside _genereated/assets/js, everything is going to work, but when you migrate your site to production or anywhere else the app will crash.
Hope this helps.