how include in a nuxt app???

[cocodrino]

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

import Vue from 'vue';
import Argon from '@/plugins/argon-kit'
Vue.use(Argon);

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

[OriginalEXE]

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.

[caprica-Six]

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

[OriginalEXE]

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.

[rexdarel]

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

[eliasleyton]

@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

[gkkirilov]

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

[smesterheide]

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

[cristijora]

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

[Farid02]

how test if argon is configured correctly or NN

[jhalmu]

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

[smesterheide]

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?

[headofthetable]

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

[smesterheide]

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

[smesterheide]

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.

[ghost]

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

[smesterheide]

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!

[ghost]

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

[smesterheide]

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!

[ghost]

@sambrezo ty good fellow

[ghost]

@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

[ghost]

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

[smesterheide]

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

head: {
  title: 'My awesome site'
}

[smesterheide]

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

[slidenerd]

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

[carcabot]

Is here anyone who migrated this template to nuxt 3 ?