npm is great to download some js libraries, but including the into a vue app is really hard. i have no idea if there is an "official" way, but searching online i see so many different approaches.
sometimes it is imported in the app.js file, sometimes in the .vue files inside the tags. i have also seen that there are vue plugins that handle differently. how should i know if i have a vue plugin or not? i don't even know what the other option would be. like a vue module instead of a vue plugin?
is there a way that the vue app just includes/imports the stuff from node_modules so i can use it? so that after doing some npm install it is all available?
Npm just downloads the library into the node_modules folder and let's you access it where you need it.
If it's a vue component you need to import it in a vue file, because that's where you need it.
If it's a vue plugin you have to import it in the main js file because that's where it gets initalized in the whole app.
Looks like you are new to vue, I suggest you to take a look at this simple guide where you can learn some basic stuff.
Related
I'm building a project where some parts of the webpage are Vue components. And offcourse I'm using Vscode to develop it. Since this is not a complete Vue app I'm not able to use extensions like vetur to autocomplete. I was wondering if there was a way to tell Vscode that <script> includes "Vue" code or is there an extension to do so?
I don't think there is.
Just try working with it that way.
Or better still, work with the .vue files in a separate folder and move them to your current working directory when you're done.
Not efficient, but it's the best solution I can think of.
I did build some web components with stencil and published them on npm. Now I want to integrate them into another stencil app but I can't find any suggestions how to do so or the suggestions I found so far are not working.
e.g. there is no collections attribute anymore on the stencil config to include external components and this, which I found on the official documentation to distribute the components is not working:
In a stencil-app-starter app
Run npm install my-name --save
Add an import to the npm packages: import my-component;
Then you can use the element anywhere in your template, JSX, html etc.
I know that the components work because I successfully integrated them into an Angular and React App already.
Thanks for your help in advance :)
I had the same problem and just solved it. I'm building a StencilJS app and tried to use my component library #elgervb/stencil-components.
Here is what I did to get it working:
I've added my library with:
yarn add #elgervb/stencil-components
and in tsconfig.json I added typeRoots to the compilerOptions to load my types:
"typeRoots": [
"node_modules/#elgervb"
]
After that I can use all of my components in my app:
<evb-filepicker accept="image/*">
<evb-button>Pick image</evb-button>
</evb-filepicker>
Hope this helps :-)
I have started a new Vue project via the CLI. Hot reloading is working fine for all the javascript, but although I can see the scss being compiled, it doesn't reload like the javascript.
I've looked through the docs and searched but don't seem to be able to find the answer. How do I do it?
The scss is being imported, and I am making changes to the scss files not the <style lang="scss"></style>
Thanks
The new Vue.js 3.0 plugin architecture is nice, but it seems to to be missing a router plugin. If I choose not to install routing when I first create the project (vue create my-project), I'd expect that I could change my mind later and add routing with something like vue add #vue/router, but that plugin doesn't appear to exist. Is there a way to add routing from the CLI after the fact?
After some experimenting with vue-cli3, i found that you can use vue add to setup components you missed.
Use vue add router That set up the routing and created some sample components Home and About.
This also work for other modules like adding vuetify with vue add vuetify. You can read more about vue add from the plugins and presets guide
Have a look at the issue page here: https://github.com/vuejs/vue-cli/issues/1202, the conclusion is you can't use cli to add router if you didn't choose router initially.
With three reasons:
Late-adding router when you've already modified the entry file is extremely fragile.
If you haven't modified the file much, you can just re-generate the project instead.
If we only add the dependency and skip the file-modifying part, then it's easier to just npm install vue-router or yarn add vue-router.
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.