Neutrinojs/vue project: Importing vue files/templates from root folder

Folatt RPG
Folatt RPG used Ask the Experts™
on
I want to import starting from the root folder, not go several folders down.
How do I do that?

I come across this issue while trying to import a guestbook (like it's 1999) script for my homepage.

import MyGuestbook from '../../components/MyGuestbook.vue'

Open in new window

compiles.

import MyGuestbook from '/src/components/MyGuestbook.vue'

Open in new window

doesn't compile.

GuestBookPage.vue

    <template>
    <div>
        <MyGuestbook />
    </div>
    </template>
    
    <script>
    import MyGuestbook from '../../components/MyGuestbook.vue'
    
    export default {
      name: 'GuestbookPage',
      components: {
        MyGuestbook
      }
    };
    </script>

Open in new window


MyGuestbook.vue

     
<template>
      </div>
      </div>
    </template>
    
    <script src="non-editable-comments-v0.1.0.js"></script>
    <script>
      window.safeComments('CommentTitle', 'CommentTargetID');
    
      export default {
        name: 'MyGuestbook'
      };
    </script>

Open in new window


I understand that I need to use webpack, but my project uses neutrinojs/vue (Recommended for the type of project) in combination with webpack. I'm not familiar with either of them. So far adding a _webpack.config.js_ and changing the import line to `import MyGuestbook from '@/components/MyGuestbook.vue'` has not worked.

    module.exports = {
      resolve: {
        extensions: [
          '.js', '.vue', '.json'
        ],
        alias: {
          '@': resolve('src'),
          '@root': resolve('.')
        }
      }
    };

Open in new window


Nor has editing _.neutrinorc.js_

    module.exports = {
      use: [
        '@neutrinojs/standardjs',
        [
          '@neutrinojs/vue',
          {
            html: {
              title: 'MySite'
            }
          }
        ],
        '@neutrinojs/jest',
        (neutrino) => {
    	  neutrino.config.resolve.extensions
    	    .add('.js')
    	    .add('.json')
    	    .add('.vue');
    		
          neutrino.config.resolve.alias
          .set('@', 'src')
          .set('@root', '.');
    	}
      ]
    };

Open in new window


the error:

    ERROR in ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib?{"cacheDirectory":true,
    "plugins":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/fast-async/plugin.js",
    {"spec":true}],
    "/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js",
    "/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js"],
    "presets":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-preset-env/lib/index.js",
    {"debug":false,"modules":false,
    "useBuiltIns":true,"exclude":["transform-regenerator",
    "transform-async-to-generator"],
    "targets":{"browsers":[
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Edge versions",
    "last 2 Opera versions",
    "last 2 Safari versions",
    "last 2 iOS versions"]}}]]}!.
    /node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/docs/7.forum/GuestbookPage.vue
    Module not found: Error: Can't resolve '@/components/YroGuestbook.vue' in '/home/folatt/Cloud/workspace/atom/Sites/MySite/src/docs/7.forum'
     @ ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib?{"cacheDirectory":true,
    "plugins":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/fast-async/plugin.js",
    {"spec":true}],
    "/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js",
    "/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js"],
    "presets":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-preset-env/lib/index.js",
    {"debug":false,"modules":false,"useBuiltIns":true,
    "exclude":["transform-regenerator","transform-async-to-generator"],
    "targets":{"browsers":["last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Edge versions",
    "last 2 Opera versions",
    "last 2 Safari versions",
    "last 2 iOS versions"]}}]]}!.
    /node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/docs/7.forum/GuestbookPage.vue 8:0-57
     @ ./src/docs/7.forum/GuestbookPage.vue
     @ ./src/router/index.js
     @ ./src/index.js
     @ multi ./node_modules/webpack-dev-server/client?http://localhost:5000 ./node_modules/@neutrinojs/web/node_modules/webpack/hot/dev-server.js ./src/index

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial