Hey i search a powerful web framework with some specific features :
VueJS support (single file / template)
ServerSideRendering
Easy deployment (with Now, Netlify, etc..)
Powerful dynamic routes management
Why not Nuxt.Js
Because Nuxt does not support dynamic routes when the app is generated (it does not define routes automatically)
Use vue-cli-3 and generate a project with all the bells and whistles (vuex, vue-router, typescript, SPA, unit testing, etc). Then add Vuetify or another similiar Material Design framework to spruce up the UI.
Of course this is opinion based and your question will most likely get pulled down soon :)
Related
I'm learning Vue, and it's ecosystem, and now I read about nuxt.js.
As I understand, this is tool which help us to build Vue apps, but don't we do the same with vite.js?
What's the difference between them?
Vite is a build tool like Webpack, that will basically allow you to work locally on your app and build it for production. It will also bring to the table various loaders, Hot Module Replacement capabilities, environment variables, assets managements etc.
Nuxt is totally unrelated to all of this. It is comparable to Gatsby/Next/Vitepress for a React/Svelte equivalent.
It's goal is to provide more capabilities to VueJS. For example, Vue can only be run as an SPA, meaning that you will not get any kind of indexing with search engines, while Nuxt do have SSR and SSG modes that will allow your websites to be efficiently crawled.
It also brings a lot of Developer Experience niceties: auto import of the composition API, of the components, simple routing, huge ecosystem thanks to all of Nuxt's modules, simpler configuration etc...
It's more like VueJS apps on steroids basically!
Also, latest version of Nuxt (v3) works with Vite out of the box. So, both of them are complementary because you need a build tool to work nowadays in the JS ecosystem + you get more features than just VueJS.
There are tools like vite-plugin-ssr and vitesse (created by one Nuxt's core maintainer btw) who can solve the basic needs of statically generating some routes/etc but it's not as powerful, have smaller communities around it and is overall moving a bit slower.
Trusting people who are behind Nuxt/Vite is also an important aspect, and most of them are well known in the community + are serious daily maintainers!
I would like to ask what is the best approach to include and reuse Vue components that are written in .vue files (SFC), into existing web pages.
For example lets say there is already an SPA project and also an ASP Core project. I would like to reuse my ~/SPA Dir/components/*.vue into my Razor pages or just plain HTML pages. To be more specific the web pages are using Vue through the CDN js file.
In most Vue tutorials it is often mentioned how Vue is used to create SPAs or it can be used in already existing web pages. And there is also emphasis on the reusability of its' components. But it seems very frustrating and complex to follow those guidelines with often lacking and unclear guides.
From my research I realize that there must be an intermediate build process that will produce js files form the vue files. And also the need of tools like vue-loader and webpack. But still I could not find something straight to the point.
Is there a more straightforward approach or what is the most common approach to the above-mentioned scenario.
(Vue version: 3)
Thank you
Maybe try this SFC loader: https://github.com/FranckFreiburger/vue3-sfc-loader
I use it on my PHP server, where I have my .vue components and I need to compile them as .js.
I'd like to integrate VueJS through WebPack in one of my custom Odoo modules, and have it start up automatically when I launch Odoo-bin.
Does anyone have a solution?
Is it even possible?
I know you can include VueJS as a simple .JS file in the module's template, but that means I can't use the .vue components supported by WebPack.
I also read that Odoo has its own JS framework, but I couldn't find good tutorials/documentation for it.
EDIT: To anyone that might be wondering how I solved this, here's what I did:
I initialized a package.json file in the root of my Odoo folder using npm init. I added a start script to the package that launches webpack and bundles all vue components in myAddons folder (where I store my custom modules), then launches Odoo through the python odoo-bin ... command. All that's left is to use npm start to start it all up.
This way, the vue components get bundled into single JS files, that I then add to the templates of my modules. This has a small inconvenient in that the first bundle has to be done manually in order to know which JS files need to be imported to the templates. Also, i'm still trying to figure out how to bundle the components of every single module separately. Will update this once I find a proper way to do it. ...Hopefully.
By default, odoo frontend part is heavily built upon backbone, jquery, underscore. If you want to use any other JS library, you have to make sure the compatibility in between them. The odoo backend parts of JS functionalities are written under web module can be found in odoo/addons/web/static/src/js directory in odoo community codes. The ecommerce/website part is under website* modules.
Along with the fact that the Odoo JS API documentation is basically non-existent (as of the time I am posting this) .. I would add the fact that its going to be like working with a moving target compared to calling Odoo's JSON-RPC API directly since their JSON-RPC API changes very little over different versions of Odoo.
Moreover, making JSON-RPC API calls with Axios is extremely simple. So just go directly to the server's JSON-RPC API from your Vue project.
This is what I am doing with at odooinvue.org which is basically a Vue project that uses Odoo in the back-end. That project is designed specifically as a resource for Vue developers that are trying to use Odoo in the back-end but have difficulty because they are new to Odoo development.
I suggest trying #StartupGuy's odooinvue, which is really nice.
With Odoo 14 they created a new modern frontend framework: Owl framework.
I have not tried it myself.
I am using a php dojo v1.4 project with mysql as backend.
The UI looks very basic.
I need to migrate this project to a standard bootstrap admin theme.
What are the steps I need to do?
If backend and general architecture of your application will remain the same, I'd suggest you to start building new UI from the scratch. When it finished, write missing functions, which were previously implemented with dojo using jquery (which comes with bootstrap) or whatever you like.
I assume, that you are not going to use dojo anymore.
If you are facing some specific difficulties, you'd better provide more details in your question.
My team and I have a medium-large web application which uses Vue 1 and Vue-router 0.7.
Last days I was thinking about how I can migrate my project from Vue 1.x to Vue 2. In my opinion there are two possible methods:
Stop my web application development and migrate all the platform in
a few weeks.
Do an incremental migration. Some componentes will use Vue 1 and
other components will use Vue 2.
CONSTRAINTS of each option
I can't stop my web aplication because It is stable in a production
environment and I have to add features and fix issues.
I did satisfactory tests with components using Vue 1 and Vue 2. The
problem is that It is not possible to use same Vue-router version,
so I can't share routes and navigate between components...
The best option for my web application could be doing an incremental migration but...could It be possible?
Thank you for everything!
I think it is possible.
The key thing is we have to make sure Vue 2.x and Vue 1.x are able to pass data to each other, and the reactivity should work to avoid complicated blocks of code.
I've made an example here: https://trandinhkhang.github.io
About Vue router, I think we can watch for a property and then do a router.push("some-url") in both Vue Router Vue 1 and Vue Router Vue 2 to navigate. Etc.
My company have the same troubles as yours and migrating a monolith into new platform is hard and seems impossible. Lolz. Incremental migration still the best option here.
VueJS 1.x and 2.x is totally different. 2.0 is written from scratch. VueJS have an awesome migration helper which can be used and it will do lots of work for you.
Read the following migrating guide: https://v2.vuejs.org/v2/guide/migration.html
I am not sure who gig your app is but it should not take more than 2 days for a medium size application.
Here are few points from their official doc:
Where should I start in a migration?
Start by running the migration helper on a current project. We’ve carefully minified and compressed a senior Vue dev into a simple command line interface. Whenever they recognize an obsolete feature, they’ll let you know, offer suggestions, and provide links to more info.
After that, browse through the table of contents for this page in the sidebar. If you see a topic you may be affected by, but the migration helper didn’t catch, check it out.
If you have any tests, run them and see what still fails. If you don’t have tests, just open the app in your browser and keep an eye out for warnings or errors as you navigate around.
By now, your app should be fully migrated. If you’re still hungry for more though, you can read the rest of this page - or just dive into the new and improved guide from the beginning. Many parts will be skimmable, since you’re already familiar with the core concepts.
By the way, You should not upgrade the app incrementally, In my experience, it will be total mess.