I am trying to set up a working workflow using the sass version of bootstrap. I have compass and sass all set up, but can't seem to get bootstrap working. This is what I have.
gruntfile
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-bootstrap');
grunt.initConfig({
uglify: {
my_target:{
files:{
'_/js/script.js' : ['_/components/js/*.js']
} // files
} // my_target
},// uglify
compass: {
dev: {
options:{
config: 'config.rb'
} // options
} // dev
}, // compass
bootstrap: {
dev: {
options:{
config: 'config.rb'
} // options
} // dev
}, // bootstrap
watch:{
options: {
livereload: true
}, // options
scripts:{
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, // scripts
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html:{
files: ['*.html']
} // html
} // watch
}) // initConfig
grunt.registerTask('default', 'watch'); // set to be the default task for grunt
} // exports
config.rb file:
require 'bootstrap-sass'
css_dir = '_/css'
sass_dir = '_/components/sass'
javascript_dir = '_/js'
output_style = :compressed
Here is my scss file:
#import "compass";
#import "bootstrap";
#import "_variables";
#import "_mixins";
#import "_base";
#import "_layout";
#import "_modules";
I'm not getting any errors but I don't see the bootstrap frame work moving my DOM elements around into rows and columns like I have them structured.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roux Meetups</title>
<link rel="stylesheet" href="_/css/styles.css">
</head>
<body>
<h1>Hello</h1>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet saepe mollitia pariatur accusantium, facilis animi aperiam, culpa placeat nulla quaerat deleniti ipsa consequatur rerum minima modi. Nisi necessitatibus aut, fuga?</p>
</div>
</div>
</div>
<script scr="_/js/script.js"></script>
<script scr="http://localhost:35729/livereload.js"></script>
</body>
</html>
This is my first time trying to set this up, and I'm not sure what I am missing. My guess is that it might be the way I set up the task in the gruntfile. I was trying to replicate what I did for the compass task.
I figured out what I was missing. Inside the package.json file I needed to add the Bootstrap dependency. Here is my code for that:
{
"name" : "rouxmeetups",
"version" : "0.0.1",
"dependencies" : {
"grunt" : "~0.4.1",
"grunt-contrib-watch" : "~0.5.3",
"grunt-contrib-compass" : "~0.5.0",
"grunt-contrib-uglify" : "~0.2.2",
"matchdep" : "~0.1.2",
"bootstrap-sass-official": "3.2.0",
}
}
Related
I've created a third party components library as described on this page https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components#third-party-component-library. Than I used the components in a new clean nuxt project. I have a BaseCard component which has 3 slots and I have a BaseImage component. Now I want to use the BaseImage component in a slot from the BaseCard component but it is not rendered. If I add an additional BaseImage component outside of the BaseCard component, than all BaseImage components are rendered (see screenshots below). Seems like that the components within a slot are not loaded.
Screenshots
without additional BaseImage
with additional BaseImage
Code
Don't work
<template>
<div>
<BaseCard>
<template v-slot:image>
<BaseImage
imgSrc="https://picsum.photos/400/400?random=1"
imgAlt="Some alt tag"
/>
</template>
<template v-slot:header>
Here might be a page title
</template>
<template v-slot:content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
pariatur distinctio cum. Ratione doloribus asperiores eaque
laboriosam repellendus perferendis iusto magni in necessitatibus
exercitationem eum expedita aliquam autem, tenetur itaque.
</p>
</template>
</BaseCard>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>
works
<template>
<div>
<BaseCard>
<template v-slot:image>
<BaseImage
imgSrc="https://picsum.photos/400/400?random=1"
imgAlt="Some alt tag"
/>
</template>
<template v-slot:header>
Here might be a page title
</template>
<template v-slot:content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
pariatur distinctio cum. Ratione doloribus asperiores eaque
laboriosam repellendus perferendis iusto magni in necessitatibus
exercitationem eum expedita aliquam autem, tenetur itaque.
</p>
</template>
</BaseCard>
<BaseImage
imgSrc="https://picsum.photos/400/400?random=1"
imgAlt="Some alt tag"
/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>
nuxt.config.js (shared-components is my library for the components)
export default {
// Target: https://go.nuxtjs.dev/config-target
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "demo",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/scss/variables.scss"],
styleResources: {
scss: ["./assets/scss/*.scss"],
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
"#nuxt/typescript-build",
"shared-components",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: ["#nuxtjs/style-resources"],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
};
I use nuxt 2.15.2.
I have some HTML string that I get via API. Let’s say it looks like:
const msg = 'Lorem ipsum dolor sit google
consectetur adipiscing elit yahoo
lorem ipsum.'
Now I need to add Vues #click event on those a elements. Is it possible to parse somehow the string and add the Vue event on it and output it?
Basically I have an electron app and I want to some additional logic on the links other then redirect.
You do not need to use v-html here. You can parse the string easily using node-html-parser. Then you can use a v-for to show the html
Codesandbox
Code:
<template>
<div id="app">
<div>a tags go below</div>
<div v-for="(tag, key) of a_tags" :key="key">
<a :href="tag.attributes.href">{{ tag.text}}</a>
</div>
<button #click="showTags">show tags</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { parse } from "node-html-parser";
const msg =
'Lorem ipsum dolor sit google consectetur adipiscing elit yahoo lorem ipsum.';
const tags = parse(msg);
export default {
name: "App",
components: {
HelloWorld
},
mounted() {
console.log(tags);
},
data() {
return {
a_tags: [tags.childNodes[1], tags.childNodes[3]]
};
},
methods: {
showTags() {
console.log(this.a_tags);
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
EDIT AFTER CHECKING THE FIDDLE:
It seems that appending the refs to the string is not working, therefore, you should put a ref to the parent as follows:
<div id="app">
<div v-html="msg" ref="msg">
</div>
</div>
And then add the event to each of its two children in this case as follows:
new Vue({
el: "#app",
data: {
msg: 'Lorem ipsum dolor sit google consectetur adipiscing elit yahoo lorem ipsum.'
},
mounted() {
this.$refs.msg.children[0].onclick = function(e) {
e.preventDefault();
alert('foo')
};
this.$refs.msg.children[1].onclick = function(e) {
e.preventDefault();
alert('bar')
};
}
})
I'm front end designer and trying to figure out how to use VueJS.
My github: https://github.com/soraname/mangarou
Here is my problem:
User click Soraname page
Route to Soraname page - (soraname.vue)
Load component Autor.vue - send prop or parameter
Load Soraname content
Basically, Page A route to Page A View, load Component with Page A content.
Valid if click Page B, C, D. Everyone use the same Component but change the content data.
I don't know how to do it, pass a variable to set what Data should load.
I've tried this:
soraname.vue (View)
<template>
<div class="soraname content-box">
<Autor v-bind="soraname"></Autor>
</div>
</template>
Load the Component Autor.vue
<template>
<div id="Autor">
<div class="row">
<div class="col s12 autor-header">
<img :src="pageautor.Logo" width="128"> <h1>{{pageautor.Nome}}</h1>
</div>
</div>
<div class="row">
<div class="col s12 autor-header">
<h3>Bio</h3>
<p>{{pageautor.Bio}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'autor',
components: {
},
data() {
return {
pageautor: {
Nome: "Soraname3333",
Bio: '/soraname',
Logo: '/assets/media/logos/soraname.png',
Color: 'purple accent-3',
links: [
{
Item: 'LINKSoraname',
Elo: '/soraname',
Text: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
Img: '/autores/soraname/link01.png'
}
],
mangas: [
{
Titulo: 'MANGASoraname',
Elo: '/soraname',
Sinopse: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
Img: '/assets/media/logos/soraname.png'
}
]
},
soraname: {
Nome: "SoranamDDDe",
Bio: '/soraname',
Logo: '/assets/media/logos/soraname.png',
Color: 'purple accent-3',
links: [
{
Item: 'LINKSoraname',
Elo: '/soraname',
Text: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
Img: '/autores/soraname/link01.png'
}
],
mangas: [
{
Titulo: 'MANGASoraname',
Elo: '/soraname',
Sinopse: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
Img: '/assets/media/logos/soraname.png'
}
]
}
}
},
methods: {
}
};
</script>
Router: https://github.com/soraname/mangarou/blob/master/src/router.js
Soraname View (Page A): https://github.com/soraname/mangarou/blob/master/src/views/soraname.vue
Autor.vue (Component): https://github.com/soraname/mangarou/blob/master/src/components/Autores/Autor.vue
Thank you!
In most cases, the data comes from a remote server, you can use your component to make an AJAX call and store the result however a better approach will be to use VUEX as a centralized state - with this approach you will also be able to use the author data across multiple components without the need to pass it over and over.
To make it clear, your route should have a parameter to identify the selected author (surname, id, whatever) - you do that with :surname when specifying the route. Then your component is loaded and read the parameter from the route this.$route.params.surname then use it to load the data from a remote server / vuex
In my opinion you don't need vuex you need a parent component (maybe layout) that gets the data has a computed property which it passes to the child component, the computed property is the data you want, it will update when your child component emits a change that triggers an event to change one of it's dependencies.
So basically parent handles data passes down to child and changes based on events emitted from child.
Create a screen "custom-screen" extended from screen widget with a template show a paragraph of lorem and return object of screen widget so it can be called from other widgets.
This screen I want to trigger this screen widget from a button. The screen showed but I got this error "this.pos is undefined" when the button clicked
TypeError: this.pos is undefined
TypeError: this.pos is undefined
http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:337
Traceback:
show#http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:337:1
show_screen#http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:316:28
button_click#http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:572:385
renderElement/<#http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:362:203
dispatch#http://localhost:8069/web/content/941-9a091d9/web.assets_common.js:892:378
$event.dispatch#http://localhost:8069/web/content/1394-95d31f5/point_of_sale.assets.js:480:8
add/elemData.handle#http://localhost:8069/web/content/941-9a091d9/web.assets_common.js:865:151
__mainfest__.py
{
'name': "custom-screen",
'summary': """
Short (1 phrase/line) summary of the module's purpose, used as
subtitle on modules listing or apps.openerp.com""",
'description': """
Long description of module's purpose
""",
'author': "My Company",
'website': "http://www.yourcompany.com",
'category': 'Uncategorized',
'version': '0.1',
# any module necessary for this one to work correctly
'depends': ['base'],
# always loaded
'data': [
'views/templates.xml',
],
'demo': [
'demo/demo.xml',
],
'qweb': [
'static/src/xml/custom-screen.xml',
],
}
views/templates
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<script type="text/javascript" src="/custom-screen/static/src/js/custom.js"></script>
</xpath>
</template>
</odoo>
> custom.js
odoo.define('custom-screen.custom-screen', function (require) {
"use strict";
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');
var Button = screens.ActionButtonWidget.extend({
template: 'Button',
button_click: function () {
var self = this;
console.log('Button Clicked');
self.gui.show_screen('custom-screen');
},
});
screens.define_action_button({
'name': 'button',
'widget': Button,
});
var CustomScreenWidget = screens.ScreenWidget.extend({
template: 'CustomScreenWidget',
init: function () {
console.log("Initialize the custom screen");
}
});
gui.define_screen({
'name': 'custom-screen',
'widget': CustomScreenWidget,
});
return {
Button: Button,
CustomScreenWidget: CustomScreenWidget
};
});
static/src/xml/custom-screen.xml
<t t-name="Button">
<span class="control-button">
<!--<i class="fa fa-print"></i>-->
Open Custom Screen
</span>
</t>
<t t-name="CustomScreenWidget">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, aliquid cupiditate dignissimos, doloribus, enim error eum fugiat id nisi odit quibusdam quo repellat repellendus sed vitae voluptatem. Distinctio, nemo.</p>
</div>
</t>
Can you provide whole traceback of error stack here. Also this error is raised because you try to access current value of 'pos' object but it is not defined so this error is getting raised.
Could you help me identify this issue please.
I try to load remote data by clicking on the button but I have an error:
Uncaught Error: Cannot find module 'http'...
I have written couple tests with tiny-json-http and with axios.
My steps after creating a "vue-cli-error-http" project folder :
$ npm install -g vue-cli
$ cd vue-cli-error-http
$ vue init webpack .
$ npm install axios --save
$ npm install tiny-json-http --save
$ npm run dev
I created a new component LoaderTiny.vue in src/components/:
<template>
<div class="hello">
<h1>{{msg}} </h1>
<hr />
<button v-on:click="getData">Get Data</button>
<ul v-if="posts && posts.length">
<li v-for="(post, index) in posts" :key="`p-${index}`">
<p><strong>{{post.title}}</strong></p>
<p>{{post.body}}</p>
</li>
</ul>
<ul v-if="errors && errors.length">
<li v-for="(error, index) in errors" :key="`error-${index}`">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import tiny from "tiny-json-http";
import axios from 'axios';
export default {
name: "LoaderTiny",
data() {
return {
msg: "Welcome to Your Vue.js App",
posts: [],
errors: []
};
},
methods: {
getData: function(event) {
const reqURL = `http://jsonplaceholder.typicode.com/posts`;
/*
this.posts = [
{
userId: 1,
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body:
"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
userId: 1,
id: 2,
title: "qui est esse",
body:
"est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
];
*/
/*
tiny.get( {reqURL} ).then(response => {
// JSON responses are automatically parsed.
console.log(response);
this.posts = response.body.Items;
}).catch(err => this.errors.push(err))
*/
try {
axios.get(reqURL)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data;
})
.catch(e => this.errors.push(e));
} catch (err) {
console.log(err);
}
}
}
};
</script>
And in the Router (src/router/index.js):
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import LoaderTiny from '#/components/LoaderTiny'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/test',
component: LoaderTiny
},
{
path: '/',
component: HelloWorld
},
]
})