how include in a nuxt app??? about vue-argon-design-system HOT 24 OPEN

Hey @cocodrino, I just went through this so let me explain.

1. Download the full zip
2. Create a new directory in your nuxt project and call it argon
3. From the downloaded zip, extract the assets, components, directives and the plugins directories and add them to your newly created argon directory
4. If you already don't have it, create a plugins directory in your nuxt project
5. Inside the plugins directory, create a new file and call it argon.js
6. Paste the following contents in it:

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.

from vue-argon-design-system.

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

from vue-argon-design-system.

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

from vue-argon-design-system.

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.

from vue-argon-design-system.

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.

from vue-argon-design-system.

Please take a look at nuxt.config.js. It uses vue-meta to derive the page title.

head: {
  title: 'My awesome site'
}

from vue-argon-design-system.

Hello everybody! I found time to update the Nuxt version. For details see: smesterheide/vue-argon-design-system-nuxt#1

from vue-argon-design-system.

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 ...

from vue-argon-design-system.

@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.

from vue-argon-design-system.

@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

from vue-argon-design-system.

@rexdarel I fixed it by npm install --save node-sass sass-loader

from vue-argon-design-system.

how test if argon is configured correctly or NN

from vue-argon-design-system.

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...

from vue-argon-design-system.

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?

from vue-argon-design-system.

@sambrezo thanks for this! this saved me a bunch of time

from vue-argon-design-system.

I should have documented the changes better. Other than the bootstrap reference, these are the differences to upstream:

smesterheide/vue-argon-design-system-nuxt@77daeca

from vue-argon-design-system.

@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.

from vue-argon-design-system.

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!

from vue-argon-design-system.

@sambrezo Yay, thx. I was also thinking on #2 way of doing this. I will give it a try.

from vue-argon-design-system.

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!

from vue-argon-design-system.

@sambrezo ty good fellow

from vue-argon-design-system.

@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

from vue-argon-design-system.

@sambrezo Hey. After deploying I didn't find where to change the title of app in the code for this tag <title data-n-head="true">vue-argon-design-system-nuxt</title>

from vue-argon-design-system.

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

from vue-argon-design-system.