I installed tailwind css from default NUXT cli. And now i want to add flowbite [ Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more. How can I do that in my own application?
package.json
{
"name": "nmdeia",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^4.2.1",
"postcss": "^8.4.4"
}
}
Update
Achieved to make it work with Nuxt3 thanks to this comment, here's a working Github repo.
Old answer
After spending 3 hours trying to configure it in any possible way with Nuxt 2 and 3, I just tried with Vue. Working great with Vue at least.
Regarding this part of the documentation
We are currently working on a standalone Vue.js component library to provide full support for this technology and compatibility with frameworks such as NuxtJS.
And this message from the main maintainer
It seems that this problem is associated with statically generated websites that are based on virtual DOM's like NextJS and Nuxt. We'll take a good look into this next week and see if we can provide support before we finish the standalone React & Vue.js libraries which will work seamlessly with these technologies.
The reason the interactive elements don't work is that the time at which Flowbite JS is being included, the DOM probably doesn't exist yet because the querySelector's are not targeting the elements correctly.
This has been solved for simple React and Vue.js projects by applying a DOMContentLoaded event listener on the document object, but I'm not sure why these querySelectors are not finding the elements in Nuxt or NextJs.
It's fair to say that Flowbite is not supporting components requiring some JS (like Modals, Dropdowns, etc...) for Nuxt2 and 3 at the moment. Of course, we can follow your Github issue and have somebody prove me wrong!
Related
I'm building a Wordpress theme and have recently switched from using Prepros to Webpack/Babel/PostCSS etc... to do all of the SASS and Javascript compiling manually so that I can add more custom functionality.
The last functionality of Prepros that I need to recreate is the automatic file uploading via FTP when a file is edited. I've been searching around for a while now and can't really find any Webpack plugins that will automatically upload files to a server via FTP whilst also giving me lots of options (i.e. specifying file extensions to upload/ignore).
What's the best way to automatically upload files to a server via FTP once they have been changed (saved) using Webpack?
At the moment it looks like my best option is webpack-ftp-upload-plugin, but it doesn't look like there are many customisation options as I mentioned above...
Use this script after completing build ftp-deploy. Right after the compilation, the bulldog will be deploy. You do not need to have a plugin in the webpack
"scripts": {
"build": "concurrently \"yarn prod"\ \"yarn deploy\"",
"prod": "webpack --config webpack.config.js --mode production",
"deploy": "node deploy"
}
I build a project in react-native and it works fine on my computer, but after change its location the problem starts to happen. I installed the package using "yarn add #react-native-community/async-storage"
I tried to npm install, re-install the component with yarm, and others.
"dependencies": {
"#react-native-community/async-storage": "^1.4.2",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-vector-icons": "^6.5.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1"
},
FAILURE: Build failed with an exception.
What went wrong:
A problem occurred configuring project ':#react-native-community_async-storage'.
SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/matheus/Desktop/TicTaeToe/android/local.properties'.
create a file in the android folder called local.properties
In this file write the path to your sdk, example:
sdk.dir=C:\Users\ialluego\AppData\Local\Android\Sdk
(ialluego is your username)
Basically its like You are building an apk without sdk , android sdk is required to build an app in react native and sdk`s path is located inside your system somewhere like
C:\Users\NameOFYourSystem\AppData\Local\Android\Sdk
So to do this you can create local.properties file in android folder of your app and map the sdk.dir= above path
thats it all it needs one line in locaal.properties
I have been playing with the Vue for few months and i really loved it. I am using the webstorm as an editor, it has all the pre-installed templates for the Vue and other frameworks and the development was really fun with the Vue. Anyway, when i decided to deploy the app on Heroku, it didn't work. When i run the project on my local machine it works fine but when i deploy on the Heroku, i get an empty page. I googled for the solution and i found out there should be some dist folder that i never had, even on my local machine i can't find this folder. For now, i have these folders:
My question, do i have to create DIST folder and move there the index.html and some other files? Do i have to run the npm build(i did and nothing actully happened). Here is my p.json:
"scripts": {
"postinstall": "npm install express",
"start": "node server.js"
},
"dependencies": {
"vue": "^2.5.2"
},
so what i do wrong and how i make my app work?
Thx
You need to create a final version. If you use cli vue version 3, you can use command vue-cli-service build.
Link: https://cli.vuejs.org/guide/build-targets.html#library
After build project you can download folder dist in heroky (or example surge.sh) and visit you site online.
Good luck.
I installed the IntelliJ Prettier plugin for web development. Unfortunately I was not able to specifiy a custom configuration, which consists of this line: "prettier.singleQuote": true.
What I tried:
Under Languages & Frameworks > JavaScript > Prettier I specified once the global and once the project specific prettier installation. (In the screenshot you'll see the global package).
Not regarding configuration file I tried creating a .prettierrc file in my projects' root where the package.json lies. The config file looks like this
.prettierrc
{
"prettier.printWidth": 5,
"prettier.trailingComma": "none",
"prettier.singleQuote": true
}
Since this didn't work I renamed it to .prettierrc.json which didn't work either. Then I tried to use the "prettier" tag in my projects' package.json like this:
"devDependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest-fetch-mock": "^1.5.0",
"jest-styled-components": "5.0.0",
"prettier": "^1.13.5",
"react-test-renderer": "^16.2.0"
},
"prettier": {
"prettier.singleQuote": true
},
Still when I format with CTRL+ALT+SHIFT+P it only applies the default configuration and not the provided one, thus replacing all existing single to double-quotes.
I also tried a few things mentioned here (IntelliJ Forum), which didn't work for me either. What am I missing? (Tried also a desperate IDEA restart ...)
I assume prettier is installed.
To configure prettier you have go > Settings > Tools > External Tools
Create prettier action, Follow screenshot for commands.
Follow below steps to apply prettier on js file
Open a file
Hit Ctrl+shift+a or Right click on file > External Tools > Prettier (action name)
Type your action name (prettier name which you given)
Hit Enter
please click here for more info on this.
https://intellij-support.jetbrains.com/hc/en-us/community/posts/360002745119-How-to-have-Reformat-Code-feature-behave-exactly-like-Prettier-
"You can re-import settings at any time using Apply Prettier Code Style Rules in the .prettierrc right-click menu:
"
I have a question regarding loading the dependencies using Bower.
I have bower.json like
{
"name": "My project",
"version": "0.1",
"dependencies": {
"angular": "~1.2.0",
"angular-bowser": "~0.0.1"
}
}
//I want to add alert.js dependency
I was hoping to add a custom bootstrap JS file that is only for alert. I am not sure how to add the custom file since I can't run bower install to install the custom file.
Any tips? Thanks a lot!
You add bootstrap as a Bower dependency. Then in whatever other tool you're using to either generate <script> tags or generate a single concatenated JS file, you add Bootstrap's alert.js (and any other Bootstrap jQuery plugins that Alert depends on) to the list of required JS files.
Speaking more generally, Bower is an pretty minimalistic package manager, to the point that it is arguably not very useful, as it provides relatively little metadata and leaves many issues to instead be dealt with by other tools or by the user manually. Hence, what you're asking for here goes beyond the realm of Bower itself.