Open cocodrino opened 5 years ago
Hey @cocodrino, I just went through this so let me explain.
argon
assets
, components
, directives
and the plugins
directories and add them to your newly created argon
directoryplugins
directory in your nuxt projectplugins
directory, create a new file and call it argon.js
import Vue from 'vue';
import Argon from '@/argon/plugins/argon-kit';
Vue.use (Argon);
7. In your nuxt.config.js file plugins entry (if not already present, define it, it is supposed to be an array) add `'~/plugins/argon'`
That should be it, you are now ready to use Argon. You will also probably want to load the Open Sans font from Google or wherever, unless you plan on using some other font.
Hey there @OriginalEXE, i did try what you suggested, however I still see the main Nuxt view that loads. Cannot seem to run the argon-kit. No errors at all. Any ideas why?
PS. I wonder, do I only need to import "assets, components, directives and the plugins" from argon-kit? How about the /views directory ...
Hey,
Well, it depends on your goal. We wanted to make use of the components and were not interested in the views, so we did not import them. I am not sure what you expected to happen once you imported Argon, but to me it's just a framework like regular bootstrap, you import it and then take components that you need and craft pages from them.
@OriginalEXE I followed your instruction above and still I can't work it out.
I am new to nuxt. I changed some lines on the argon-kit.js since it wont load scss (I think I need some loader for this) and changed the file scss and pasted the css file of argon.
as you can see from the image, I needed to import Vue since it will give me an error of Undefined Vue
I reckon that the Vue is not properly used in the argon-kit.js since it is not highlighted.
@rexdarel
Try
import "@/argon/assets/vendor/nucleo/css/nucleo.css";
import "@/argon/assets/vendor/font-awesome/css/font-awesome.css";
import "@/argon/assets/scss/argon.scss";
import globalComponents from "./globalComponents";
import globalDirectives from "./globalDirectives";
import VueLazyload from "vue-lazyload";
export default {
install(Vue) {
Vue.use(globalComponents);
Vue.use(globalDirectives);
Vue.use(VueLazyload);
}
};
if you have another error try with yarn run lint --fix
@rexdarel I fixed it by npm install --save node-sass sass-loader
Hey you all, I dropped vue-argon-design-system
into a newly created Nuxt app. You can check it out at https://github.com/sambrezo/vue-argon-design-system-nuxt
Guys I am very glad your solved this quite easily! and thanks a lot @sambrezo for the new repo example. I will keep the issue open for other people to easily find this information
how test if argon is configured correctly or NN
Hmm:
NuxtServerError Module build failed (from ./node_modules/sass-loader/lib/loader.js): @include form-validation-state($state, map-get($data, color), map-get($data, icon)); ^ Wrong number of arguments (3 for 2) for `form-validation-state' in /Users/jhalmu/Documents/Production/vue-argon-design-system-nuxt-master/node_modules/bootstrap/scss/_forms.scss (line 246, column 12)
I installed @sambrezo 's example. Should take this there...
FYI I have replaced the provided bootstrap version with the latest one from npm (^4.1.3) at the time. You can compare argon.scss
with the original and you will see I am importing ~bootstrap
which refers to node_modules
instead of the provided bootstrap
folder (which is still there).
@jhalmu Can you try changing ~bootstrap
back to ./bootstrap
for all instances and see if it works again?
@sambrezo thanks for this! this saved me a bunch of time
I should have documented the changes better. Other than the bootstrap
reference, these are the differences to upstream:
sambrezo/vue-argon-design-system-nuxt@77daeca11db8fd513a5e99b94ec7c661299429f7
Hmm:
NuxtServerError Module build failed (from ./node_modules/sass-loader/lib/loader.js): @include form-validation-state($state, map-get($data, color), map-get($data, icon)); ^ Wrong number of arguments (3 for 2) for `form-validation-state' in /Users/jhalmu/Documents/Production/vue-argon-design-system-nuxt-master/node_modules/bootstrap/scss/_forms.scss (line 246, column 12)
I installed @sambrezo 's example. Should take this there...
Should be fixed now for any newcomers. Might pull the latest commits by @cristijora at a later time.
@sambrezo Hey fellow. Thanks for the nuxt version of this vue template. Hope you will give me advice as I'm a newcomer to Nuxt. Basically, I downloaded non-nuxt version of it from the website and I did my changes in one of the pre-packaged pages (landing) in the way to obtain my new page with many subsequent changes in its .vue and various scss files. Later, before going public it to hosting I realized I need to put/convert it to nuxt to get static pages for seo etc. How would you suggest doing this as seamless as possible (considering your nuxt repo of it) so I wouldn't lose my vue & scss changes across files? Many thanks to you.
I also learned about the downsides of regular Vue the hard way in regard to SEO. For my last project I just used a third party service that generates prerendered pages for web crawlers like GoogleBot. This requires no changes to your code, but you need control over your webserver configuration. I successfully set up Nginx with https://github.com/prerender/prerender. There are is also a paid service very easy to find which is free for small websites with just a few pages.
In case you want to switch to Nuxt, there is really no accepted migration path that fits all needs. I suggest you clone the repo and just replace the files one by one. Basically all the original files are still available including the landing page and SCSS files. Good luck!
@sambrezo Yay, thx. I was also thinking on #2 way of doing this. I will give it a try.
I did some rectructuring at vue-argon-design-system-nuxt. There is now an original
branch to keep track of changes to the Vue version. I intend to keep the Nuxt version as close as possible to the original.
The current version is v1.0.0-nuxt-1
. Layouts have seen some changes and the Argon starter is now the default template. Sorry for any merge conflicts you might experience. The next milestone is to incorporate changes from v1.1.0
. Contributions are welcome. Happy coding!
@sambrezo ty good fellow
@sambrezo You might also want to upgrade the outdated dependencies in package.json which are creating plenty of issues. There are a couple of outdated like bootstrap, transitions, pwa versions. Ty
@sambrezo Hey. After deploying I didn't find where to change the title of app in the code for this tag
Please take a look at nuxt.config.js
. It uses vue-meta
to derive the page title.
head: {
title: 'My awesome site'
}
Hello everybody! I found time to update the Nuxt version. For details see: https://github.com/sambrezo/vue-argon-design-system-nuxt/issues/1
what is the difference between components inside the src / components folder and views / components ? in nuxt why not put all components inside components directory? can someone please clarify
Hi man, first, thanks, this looks great, after uikit I'd not found any template system that really I like it...
do you know how integrate it with a nuxt app??? I suppose that I need to use this
but I think that this need an extra step...also would be great if you could includes this with create-nuxt-app https://github.com/nuxt-community/create-nuxt-app ... this would increase the visibility of the project...
thank you...good luck