-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.
Related
if you set ssr: false in nuxt.config.js file, does this make nuxt work exactly same as plain Vue application?
if so, doing npm run build, npm run start will just serve static html/css/js file with node.js server?
Am I right here?
Yeah, that will make Nuxt behave like Vue for the rendering part.
Be sure to have generate for an SSG target and not build (for SSR).
Here are more details of the benefits of still using Nuxt: https://stackoverflow.com/a/74714106/8816585
If you're doing npm run build, it's supposing that you're using your Nuxt app as SSR. Which means pretty much nothing since you don't want SSR (false).
It's like saying
I want a tomato sandwich, but without the tomato.
In the current situation, Nuxt3 will probably give you a sandwich but without tomatoes aka SPA-only Nuxt3 generated as SSG. Totally hostable as any other regular SPA app, on Netlify.
Official source: https://nuxt.com/docs/getting-started/deployment#client-side-only-rendering
Also, what Nuxt is doing during local development and on production are 2 different things.
You will always have a Node.js server running for dev, but that is not the case once deployed (SSG, SPA, etc...).
If you want a Nuxt3 SSR'ed app, use build + ssr: true.
From the nuxt3 document
ssr - Disables server-side rendering for sections of your app and make them SPA-only with ssr: false
What I understand from the doc
When SSR is false and use npm run build
If you make ssr: false and build the project not generate, then It will work like a simple vue spa application. Like a traditional spa application, it will load the whole js in the initial load and then render in the client site.
When SSR is false and use npm run generate
Again if you make ssr: false and generate the project not build, Then it will prerender all the pages and generate the static file. And it will work like a traditional static website. But you have to be careful that as SSR is false it will not prefetch any data it needs in the generated time. So It's best to generate pages with SSR mode on.
I am new to Vuejs. I have created a Vuejs project, but I have to re-run the project each time to reflect the changes in browser. The project is created by(default vue 3)
vue create projectname
Look into VITE. It's made by the same guy who made vuejs. It does what you're asking about with Hot module replacement (changes made show up instantly in the browser). It's amazing. I'm not sure if you can update an existing project to use vite, but it's dead easy to start a new vue3 project with vite.
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
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.
How can I use VueJS plugins if I don't use any Javascript Package Managers (NodeJS, NPM)?
I'm building an app made from a Bootstrap template and Server Side framework in Coldfusion (CFWheels).
I wanted to use some of VueJS's functionality such as two-way data-binding, easier integration of animation using animate.css, etc. I included it via
<script src="https://unpkg.com/vue"></script>
However, I can't use NPM as the app will be continually be improved and maintained in production.
I wanted to use some VueJS plugin such as VueJS typeahead.
When I include the script, and try the documentation, there are errors in the Javascript like being unable to import, export module, require. I think these are modern Javascript coding style that are not recognized in my setup because I didn't use the NPM and require those polyfills.
Is there a way that I can make those VueJS plugins work? Or if I can just include the polyfills needed and proceed with the plugin documentations so the browser will understand those new JS terms without using NPM or other Javascript Package Manager.