I have a template built in zurb foundation for a sub-domain, i want to use foundation along side bootstrap in my laravel Vue app, entire site uses bootstrap but a subdomain template requires foundation. i have looked for solution but all of them are telling to remove bootstrap. any help ?
Mixing different CSS frameworks will not work as both manipulate the DOM, use the same class names and CSS classes in components and so on. You would have to prefix everything, encapsulate it and so on.
Related
So i have a laravel application that i built and is live using Laravel without Vue.js. Now, finding out about vue.js and its lightweight + numerous additional features for improved user experience, i have decided to include it and rebuild my app into components with much better reactivity.
The only issue is, with my little research, i found out that the main vue element in the resources/js/app.js points to an #app element in views/layouts/app.blade.php which would be fine if perhaps i had an SPA or and MPA that starts from there.
However, in my implementation i have different layout files for both back end and user section of my app, and i don't know how to go about it ( which element to point the vue object to).
Here's what i would like to have though, if possible. I would want a commons.js to have all my common components and imports and perhaps a [page].js for pages where i would need a bit more.
Thanks in advance!
I figured out how to handle this.
The Vue instance created in the app.js doesn't have to be your only instance. In MPA's you will most like have multiple vue instances, perhaps on per page. To keep my code clean, i kept the dependencies common to my whole application in app.js.
For my portals, each portal has a commons.js which containts dependencies specific to the management of my application and hence dont need to be loaded when the user is surfing my up. I set to bundle with webpack and include in all portal pages.
Furthermore, each page has a page.js which is also bundled and included only page specific dependencies (components etc) and a vue instance for each page.
By using this architecture i reduce the JS needed to be loaded to only the necessary on both portal pages and the main app for users.
Hope this helps someone! Happy coding.
I worked all day yesterday to finish a google cloud function to power an appointment maker vue component. The last step is actually UI using the returned object. I was planning on using the vuetify date/time pickers with allowed dates and times.
After spending much of today trying to add vuetify to an existing project to only use those to components, it is causing style errors with some classes(margin, etc) that are coming from main.sass.
I thought of adding a prefix to tailwind, but I don't have the time or inclination to go back to all of my components and files to add the prefix to all of my tailwind classes.
Is there something I can do to scope the vuetify classes/css so as not to cause problems outside of the two components I am trying to use?
Can I add the vuetify css after my tailwind is compiled and assembled so the tailwind classes win take precedent?
I don't have code to show as it is fairly straight forward. I thought the google calendar API would be the hardest part of this component, but it is proving to be the easier.
Tailwind allows you to prefix the generated classes in the configuration file. See https://tailwindcss.com/docs/configuration
I know this is too late to answer but I'm writing this for other people like me who came up with this problem.
In order to add Vuetify to an existing project which is using Tailwind CSS without CSS class conflicting, You just need to activate treeShake in Vuetify options.
For example in a Nuxt project, add the below snippet in nuxt.config.js:
export default {
// Other Configs
vuetify: {
treeShake: true
},
}
I need some advice on what the best practice is in adding Metronic 5.0 components into my ASP.NET zero template. I was expecting that Metronic 5 would include directives for Angular 2 but it is not the case and all components are set to a field via JQuery yet. For example how would I be able to include the Metroic 5 slider into my project? I have noticed that there is a PrimeNg slider directive in the project and once I included it into my main.module i can simply using its directive in my code. But how can I use Metronic ones? I can't find any angular directive for Metronic in the downloaded package! there are just some demo pages which all are using Javascript to bind html elements to components. I have not found the core javascripts code for the Metronic elements yet though!
I think it would be very helpful to have a tutorial on how to add extra metronic components into the template.
I'm going to launch a new project with this two frameworks (I like):
Laravel 5
Vue.js
The Frontend developer prepares the HTML's in atomic design, generated with patternlab.io.
Now I'm looking how I can integrate the patternlab.io project that I don't have to rewrite all the elements in a blade template.
I found some implementations combining Patternlab & Laravel using TwigBridge, Laratash Laravel extensions.
But I've some thoughts:
In the blade templates there is: logic, conditions, loops,.... If I combine patternlab and laravel then I need to put all this in the patternlab project.
Because of using vue.js I need to add also these tags to the patternlab templates
So I think it's not the best choice to integrate the patternlab.io templates in the laravel project.
My idea was:
Frontend DEV uses patternlab to create the templates
Laravel automatically generates & imports the CSS Stylesheet generated in patternlab
The Backend Developers copy the patternlab - molecules manually in the blade templates and add their own logic
If the Frontend DEV make changes on CSS, it's fine - we'll run in no issues; after rerunning the laravel gulp process to update the css files we have the new updates.
If the Frontend DEV makes some changes on a html structure we need to manually adjust them.
Is there a better solution combining Atomic Design, Vuejs and Laravel? How do you deploy atomic design in your CMS?
In the last three Vue/Laravel projects we've created we'v stopped using PHP as a rendering engine all together and used Vue exclusively. Laravel is still a really great framework for writing business logic and apis in a clean testable way – but we've decided to never use blade again.
Typically the issue you run into when trying to create a JS rendered application with a PHP backend is the lack of server side rendering. To solve this problem I've turned to a new project out of the Vue community, Nuxt.js (I have no affiliation with them, just a happy developer). Nuxt lets you write vue components and have them be both server side rendered, and rendered in the browser after the initial page load.
This allows us to completely decouple all of the rendering responsibilities away from Laravel and keep it in a single location, so no need to do blade and Vue – it's all Vue.
The only downside is that you'll need 2 servers Node.js and PHP.
According to Laravel Documentation
In other frameworks, pagination can be very painful. Laravel makes it a breeze. Laravel can quickly generate an intelligent "range" of links based on the current page, and the generated HTML is compatible with the Bootstrap CSS framework.
My question is Foundation also compatible with Laravel's pagination?
There is nothing to stop Laravel pagination working with Foundation but the default HTML generated by Laravel is Bootstrap specific. There is no mention in the docs or API to suggest that it can generate Foundation-specific code.
You have two choices. One is to write your own custom code (covered elsewhere on Stack Overflow, although not specifically for Foundation)
The other option is to pull in a specific package that someone else has written:
Laravel 4
https://github.com/binarix/Laravel-Foundation-Pagination
Laravel 5
https://github.com/etcinit/foundation-pagination
You can easily pass the paginator data to your own view of a paginator. - Meaning you can do the following:
Create a folder named components in your views folder and then create a pagination view; after pass the pagination data to the component created and include it as shown below in any of your views.
Getting a paginated data set:
$yourPaginationData = App\YourModel::orderBy('id', 'desc')->with(['relation'])->paginate(15)
Including the pagination:
#include('components.pagination', ['paginator' => $yourPaginationData])
In the view, one can manipulate the pagination data as needed and create their own design and idea of pagination.
You can also find something open-source for foundation that was custom built to work with laravel here.