Nuxtjs Issue

[coatesjonathan]

Hey, I'm trying to use this in a Nuxtjs application, and when I try to import this via the nuxtjs /plugins/ method I get the following error when importing a component.

 ERROR  Failed to compile with 1 errors
This relative module was not found:
* ./section.vue?vue&type=template&id=4d203d86&lang=pug& in ./builder/sections/section.vue

Can anyone help?

[mewis]

I don't know if this is relevant now but you need pub and pug-loader npm install pug pug-plain-loader --save-dev or yarn add pug pug-plain-loader --dev

Nuxt should not need any configuration after this as vue-loader will take care of it

Or alternatively you could not use pug

[levis012]

@coatesjonathan Is your project working well? I have integration problems, Vuse don't work with nuxtjs.

In NuxtJs project.

I have created new plugin file to register the Vuse

// plugins/vuse.js

import Vue from 'vue'
import Builder from 'vuse';

import hero1 from '@/components/hero/hero1';
import hero2 from '@/components/hero/hero2';
import section1 from '@/components/section/section1';
import section2 from '@/components/section/section2';
import social1 from '@/components/social/social1';
import social2 from '@/components/social/social2';
import social3 from '@/components/social/social3';
import social4 from '@/components/social/social4';
import newsletter from '@/components/forms/newsletter';

// register components.
Builder.component(hero1);
Builder.component(hero2);
Builder.component(section1);
Builder.component(section2);
Builder.component(social1);
Builder.component(social2);
Builder.component(social3);
Builder.component(social4);
Builder.component(newsletter);
// install the builder
Vue.use(Builder, {
  // main css file
  assets: {
    css: 'css/style.css'
  },
  // builder default themes
  themes: [{
    name: 'Theme 1',
    sections: [hero1, section1, social1, social3, newsletter]
  }, {
    name: 'Theme 2',
    sections: [hero2, section2, social3, social4, newsletter]
  }]
});

And make some changes in // pages/index.vue

<template>
  <div class="container">
    <VuseBuilder />
  </div>
</template>

<script>
export default {}
</script>

<style>
..................
</style>

I getting the error (see image below)

Click on Theme 1

And get error

Can you help me a sample project integration with Vue and Nuxt Js

[mewis]

I haven't actually used it much to be honest, I was starting a proof of concept but then had to leave it. I think though the issue you are having is related to the sections, from what I gathered those sections are not prod ready but were more just examples of what can be done. I got around this by importing types like... import { types } from 'vuse' Then in $scheme you have

  $schema: {
    title: types.Title,
    content: types.Text,
    images: [types.Image],
    button: types.Button,
    classes: types.ClassList
  },

I'm not part of this project and have not worked with it much so this might not be the correct solution rather just what I did.

[levis012]

@mewis Thanks

I have made some change on Component but still not work.

In my case,

$sectionData is undefined.

Did you have any ideas to replace Vuse ?

[mewis]

I am afraid not, when I was playing around it was for a proof of concept but unfortunately I ran out of time on it. I seem to remember that I needed to manually add utils.js from vuse to get it work but thats just from memory.

Sorry I cant be more help but I didn't get too far with this before stopping.