What is the correct way of importing javascript modules into vue-components?
I currently have a vue-component component.js:
Vue.component('component', {
name: 'component',
props: ['pdf'],
template: ` ...
I want to take a pdf-url as a prop and use pdf.js within the component, but I'm having trouble finding the right way/standard way to import pdf.js into my project.
Worth noting is that I'm not using vue-cli, or any other kind of bundler like Webpack, so my project structure might be a bit different from standard project structures. I access my components from a main.html file in which I have imported both vue and the components in script-tags in the head of the html. Would I simply import pdf.js in the same manner (head in the main.html file), or is there a "vue"-way of doing it?
If you are not using webpack or any other packager, then I will recommend you to stick to the old fashion way, just use pdf.js as script in your html and make use of the API as it is in the official documentation, such as: pdf.getPage(1).then(...)
Hope it helps.
Cheers
Related
I've searched a lot but I didn't find anything useful about this. I need to create a web-component with Stencil JS and I would like to split it in sub-components.
Is that possible doing this without exporting the whole component library, but instead exporting only the main component? Thanks in advance.
I want to generate svg compoenents which uses svg tags. Does Vue supports that?
Note, that svg elements needs to be created in the corretc namespace and vue might not be able to handle that out of the box
Yes, you can use Vue to create dynamic SVGs. There even is an example in the docs. In this podcast, Sarah Drasner talks about the combination of Vue, SVG and https://greensock.com/.
I have used this approach to build https://fn.hofmann-vratny.de/configurator, which simply binds SVG elements/properties to reactive Vue data. This worked really well for me.
You can create a component and add the SVG tags inside like:
<template> SVG Content Here </template>
Note: You might find some issues with certain SVG tags.
There's also some libraries you can use like svg-to-vue-component
Hope this helps.
I am trying a new way of writing my ui and I am using straight ESM loading with Vue. As such I am trying to load my HTML files like I would with say Webpack. I have a simple example of what I am talking about. I basically want to take...
export default {
template: "<div>Here is the component. I want this template to be an html file without webpack</div>"
// I want this to be from a url say mysite.net/viewport.html
}
I tried the simple things like
import Template from "/viewport.html"
But of course that didn't work
I think there might be something I can do with dynamic components. Has anyone tried this an come up with a good solution?
I have a very, very simple set of Vue components that all work. These are a simple addition on top of an existing C# app.
At the moment, these are .html files (brought into the app inside <script> tags) and .js files loaded by reference.
These all work, are very light weight, and I love it.
Now I want to compile the HTML for each component into a Vue render function, and the .js into one minified .js file.
The .js to .min.js is pretty standard, but I cannot figure out how to get the HTML to compile into the Vue render function. Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform, and I don't need a full web application spun up. I only need my existing, simple templates transformed to something more friendly for production than my long-form html templates getting dumped to the page.
I'm not entirely opposed to turning the .html+.js into .vue files, but just doing that doesn't seem to overcome my issue.
I cannot figure out how to get the HTML to compile into the Vue render function
To generate a render function from a Vue template string (e.g., read from an HTML file), you could use vue-template-compiler like this:
const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }
Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform
The "web server" you mention is provided by Webpack CLI, and is intended to faciliate development. You don't need to use the dev server. The article indeed describes several steps in manually setting up a project to build Vue single-file-components, but a simpler method is to use Vue CLI to automatically scaffold such a project.
I would like to know how I can add an old Three Js code to a page component in Vue Js, like just plain javascript grabed on html script tag, without using methods or computed objects from Vue
I'm using node 10.14, Vue-cli 3 and Vue scaffold
If I understand your question correctly, one way you could probably do this is to have the JavaScript extracted out into a helper file like /lib/3JS.js and then make sure to export it.
Then you could import it into your Vue file and use it there.