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
Related
-Hello I am new in Vue, I am building VueJS application in SPA with SFC, I was wondering if there is any way to see html changes without rebuild the application again, changes in all file reflect immediately but changes in html and css required execute npm run dev again.
I use Vue3, js and bootstrap only, I am not using nodejs or typescript.
I need some way to make my changes reflect on html after saving file with out rebuilding the application.
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.
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.
This is something weird that I am unable to figure out.
I did not install sass-loader from Vue, nor did I configure webpack for SCSS, but it still works fine when I use
<style lang='scss'>....some SCSS code here....</style>
inside my Vue component.
After some research: vue init is deprecated syntax for Vue-CLI 2.x that used to clone templates into your new project folder. One of these templates is the webpack-simple which you defined in your command.
In the webpack.config.js for this template, you can see that sass-loader is preconfigured.
Since Vue-CLI 3.0 and up, the command used to generate a new app is vue create.
I am using buefy autocomplete component with nuxt.js. I have imported the CSS file. and the CSS working properly on the localhost but on the live server is not working. I thought the problem may be with buefy but the same problem I am facing with vue-select autocomplete.
Everything is perfect on the local server but when I move my files to live server and do num run build noting works from buefy and vue-select.
Note: the rest of all CSS working just fine
Localhost
Production
And it's not only autocomplete component, none of the buefy components are working, Radio Buttons, Calender etc.
A little guidance will be appreciated.
Thanks
As of today, Buefy has an official support for Nuxt. Instead of importing buefy's css inside nuxt.config.js and creating a new plugin, you can use a nuxt module.
If you create a new Nuxt project using create-nuxt-app, you can choose to add Buefy as your UI framework.
If you have an existing nuxt project, you can simply install the nuxt-buefy module manually:
npm i nuxt-buefy
nuxt.config.js
...,
modules: [
'nuxt-buefy',
],
...