I failed to implement SVG-Edit into my project, can somebody show me how.
Here below is my failed solution:
Vue2: copy the compiled svg-edit code into vue project's public folder, and set vue project as multiple-page project by vue.config.js.
webpack4: install copy-webpack-plugin and make some change to webpack.config.js.
My solutions are all failed because images or reference sources are misreferenced.
Related
So, I have installed a npm module : #tinymce/tinymce-react. So, now this module's code is stored in node_modules folder in the root directory of React Project. It has two dependencies. But, where is the code for dependencies of #tinymce/tinymce-react stored?
I tried searching tinymce module (which is one of it's dependency) in my project files but I couldn't find it. So, where is the code of tinymce module stored?
I'm trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project
extendWebpack(cfg) {
cfg.module.rules.push({
test: /\.md$/i,
use: "raw-loader"
});
I'm trying to load the markdown, using import command from one of the .vue component script tag as below
import md from "~statics/help.md";
But when I run the project, it compiles to 100% and throws the below error
• Compiling:
└── SPA ████████████████████ 100% done in ~13s
ERROR Failed to compile with 1 errors 8:22:43 AM
This dependency was not found:
* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/#quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~statics/help.md
let me know if any solution
Its seems like quasar can't find the proper reference since I don't know your exact folder structure
Try using ../static/{filname} and see if it works
So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.
I'm starting from scratch and using the default create project from vue using cli 3. Everything is fine, however I noticed the chunk-vendors.js file contains vue.js.min. I don't want to include that file, how do I tell the vue to not include it in production builds?
If you want to exclude Vue from being bundled, use the library build target.
In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.